@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";

/* src/components/ui/Toast/Toast.css */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  min-width: 300px;
  max-width: 420px;
  pointer-events: all;
  animation: slideInRight 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid;
}
.toast-success {
  background: #0d2e22;
  border-color: rgba(74, 255, 197, 0.25);
  color: var(--color-accent);
}
.toast-error {
  background: #2d0f18;
  border-color: rgba(255, 77, 109, 0.25);
  color: var(--color-error);
}
.toast-warning {
  background: #2d1f0a;
  border-color: rgba(255, 179, 71, 0.25);
  color: var(--color-warning);
}
.toast-info {
  background: #0d1a2d;
  border-color: rgba(96, 165, 250, 0.25);
  color: var(--color-info);
}
.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.toast-message {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}
.toast-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.2s;
  flex-shrink: 0;
}
.toast-dismiss:hover {
  color: var(--color-text);
}
[data-theme=light] .toast {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  border-width: 1px;
}
[data-theme=light] .toast-success {
  background: #ffffff;
  border-color: rgba(22, 163, 74, 0.30);
  border-left: 4px solid #16A34A;
  color: #16A34A;
}
[data-theme=light] .toast-error {
  background: #ffffff;
  border-color: rgba(220, 38, 38, 0.28);
  border-left: 4px solid #DC2626;
  color: #DC2626;
}
[data-theme=light] .toast-warning {
  background: #ffffff;
  border-color: rgba(217, 119, 6, 0.28);
  border-left: 4px solid #D97706;
  color: #D97706;
}
[data-theme=light] .toast-info {
  background: #ffffff;
  border-color: rgba(37, 99, 235, 0.25);
  border-left: 4px solid #2563EB;
  color: #2563EB;
}
[data-theme=light] .toast-message {
  color: #1a1a1a;
}
[data-theme=light] .toast-dismiss {
  color: rgba(0, 0, 0, 0.40);
}
[data-theme=light] .toast-dismiss:hover {
  color: rgba(0, 0, 0, 0.70);
}

/* src/components/ui/Modal/Modal.css */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}
.modal-card {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  overflow: hidden;
}
.modal-sm {
  max-width: 420px;
}
.modal-md {
  max-width: 580px;
}
.modal-lg {
  max-width: 760px;
}
.modal-xl {
  max-width: 1200px;
  width: 95%;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
  gap: 16px;
}
.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}
.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}
.modal-footer {
  padding: 0 28px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
[data-theme=light] .modal-card {
  background: #ffffff;
  border: 1px solid rgba(26, 107, 232, 0.12);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .modal-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--color-text-secondary);
}
[data-theme=light] .modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text);
}
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 14px;
  }
  .modal-card {
    border-radius: 16px;
    max-height: 94vh;
    width: 100%;
  }
  .modal-header {
    padding: 18px 18px 0;
  }
  .modal-title {
    font-size: 16px;
    line-height: 1.35;
  }
  .modal-body {
    padding: 16px 18px;
  }
  .modal-footer {
    padding: 0 18px 18px;
    flex-direction: column;
    gap: 8px;
  }
  .modal-footer > * {
    width: 100%;
    box-sizing: border-box;
  }
}

/* src/components/ui/Button/Button.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn-sm {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}
.btn-md {
  font-size: 15px;
  padding: 12px 24px;
}
.btn-lg {
  font-size: 16px;
  padding: 14px 32px;
  border-radius: var(--radius-lg);
}
.btn-primary {
  background:
    linear-gradient(
      135deg,
      #4AFFC5 0%,
      #2DD4A0 100%);
  color: #000;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 255, 197, 0.35);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border-accent);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.btn-danger {
  background: transparent;
  color: var(--color-error);
  border: 1px solid rgba(255, 77, 109, 0.3);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
}
.btn-warning {
  background: transparent;
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.btn-warning:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.1);
  border-color: #F59E0B;
  transform: translateY(-1px);
}
.btn-success {
  background: transparent;
  color: #4ADE80;
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.btn-success:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.1);
  border-color: #4ADE80;
  transform: translateY(-1px);
}
.btn-info {
  background: transparent;
  color: #60A5FA;
  border: 1px solid rgba(96, 165, 250, 0.35);
}
.btn-info:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.1);
  border-color: #60A5FA;
}
.btn-loading {
  cursor: not-allowed;
}
.btn-spinner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-primary .btn-spinner {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: #000;
}
.btn-secondary .btn-spinner,
.btn-ghost .btn-spinner {
  border-color: rgba(74, 255, 197, 0.2);
  border-top-color: var(--color-accent);
}
.btn-text-hidden {
  visibility: hidden;
}
[data-theme=light] .btn-primary {
  background:
    linear-gradient(
      135deg,
      #1A6BE8 0%,
      #1250B0 100%);
  color: #ffffff;
}
[data-theme=light] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(26, 107, 232, 0.35);
}
[data-theme=light] .btn-primary .btn-spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
}
[data-theme=light] .btn-ghost {
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-text-secondary);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .btn-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

/* src/context/ConfirmContext.css */
.confirm-modal-content {
  padding: 8px 0;
}
.confirm-modal-message {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* src/layouts/AppLayout.css */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
  overflow-x: hidden;
  max-width: 100vw;
}
.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-content {
  margin-top: var(--header-height);
  padding: 32px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  animation: fadeInUp 0.3s ease;
}
@media (max-width: 1024px) {
  .app-main {
    margin-left: 72px;
  }
}
@media (max-width: 768px) {
  .app-main {
    margin-left: 0;
    background:
      radial-gradient(
        ellipse at 100% 85%,
        rgba(74, 255, 197, 0.09) 0%,
        transparent 55%),
      radial-gradient(
        ellipse at 80% 100%,
        rgba(45, 212, 160, 0.06) 0%,
        transparent 40%),
      #000000;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .app-content {
    margin-top: 72px;
    padding: 20px 16px;
    overflow-x: hidden;
  }
}
[data-theme=light] .app-main {
  background: var(--color-bg);
}
@media (max-width: 768px) {
  [data-theme=light] .app-main {
    background:
      radial-gradient(
        ellipse at 100% 85%,
        rgba(26, 107, 232, 0.07) 0%,
        transparent 55%),
      radial-gradient(
        ellipse at 80% 100%,
        rgba(18, 80, 176, 0.04) 0%,
        transparent 40%),
      var(--color-bg);
  }
}

/* src/components/Sidebar/Sidebar.css */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.sidebar-collapsed {
  width: 72px;
}
.sidebar-overlay {
  display: none;
}
.sidebar-close-btn {
  display: none;
}
.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  position: relative;
}
.sidebar-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
}
.sidebar-logo-link .logo-symbol {
  display: none;
}
.sidebar-collapsed .sidebar-header {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-collapsed .sidebar-logo-link {
  justify-content: center;
  width: 100%;
}
.sidebar-collapsed .sidebar-logo-link .logo {
  display: none;
}
.sidebar-collapsed .sidebar-logo-link .logo-symbol {
  display: flex;
}
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-nav-group {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.sidebar-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.85;
  padding: 8px 8px 4px;
  white-space: nowrap;
}
.sidebar-nav-label-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  padding: 8px 8px 4px;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s;
  user-select: none;
}
.sidebar-nav-label-toggle:hover {
  opacity: 1;
  background: var(--color-accent-glow);
}
.sidebar-label-chevron {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  transition: transform 0.25s;
  margin-left: 4px;
}
.sidebar-label-chevron.expanded {
  transform: rotate(180deg);
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-primary);
}
.sidebar-nav-item:hover {
  background: var(--color-accent-glow);
  color: var(--color-text-muted);
}
.sidebar-nav-item.active {
  background: var(--color-accent-glow);
  color: var(--color-accent);
  border-left: 2px solid var(--color-accent);
}
.sidebar-nav-item.active .sidebar-nav-icon {
  color: var(--color-accent);
}
.sidebar-nav-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
  transition: color 0.2s;
}
.sidebar-nav-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-badge-soon {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 179, 71, 0.12);
  color: var(--color-warning);
  border: 1px solid rgba(255, 179, 71, 0.2);
  border-radius: 100px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.sidebar-badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: var(--color-warning);
  border-radius: 50%;
}
.sidebar-admin-toggle {
  cursor: pointer;
}
.sidebar-chevron {
  display: flex;
  align-items: center;
  margin-left: auto;
  color: var(--color-text-secondary);
  transition: transform 0.25s;
}
.sidebar-chevron.expanded {
  transform: rotate(180deg);
}
.sidebar-admin-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
  margin-top: 4px;
  animation: fadeInDown 0.2s ease;
}
.sidebar-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}
.sidebar-admin-item:hover {
  background: var(--color-accent-glow);
  color: var(--color-text-muted);
}
.sidebar-admin-item.active {
  color: var(--color-accent);
  background: var(--color-accent-glow);
}
.sidebar-ticket-badge {
  background: #FF4D6D;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: sb-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.5);
}
.sidebar-ticket-badge-reply {
  background: #FF4D6D;
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.7);
  animation: sb-pulse-reply 1.2s ease-in-out infinite;
}
@keyframes sb-pulse-reply {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 14px 4px rgba(255, 77, 109, 0.0);
  }
}
@keyframes sb-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.85;
  }
}
.sidebar-compliance-badge {
  background: #f59e0b;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.sidebar-badge-dot--compliance {
  background: #f59e0b !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}
.sidebar-user {
  padding: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sidebar-user-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 4px;
  transition: var(--transition);
}
.sidebar-user-link:hover {
  background: var(--color-surface-2);
}
.sidebar-user-link:hover .sidebar-avatar {
  border-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(74, 255, 197, 0.2);
}
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sidebar-avatar {
  width: 36px;
  height: 36px;
  background: var(--color-accent-glow);
  border: 1px solid var(--color-border-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}
.sidebar-user-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.sidebar-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.sidebar-logout-btn:hover {
  background: rgba(255, 77, 109, 0.1);
  color: var(--color-error);
}
@media (max-width: 1024px) {
  .sidebar {
    width: 72px;
  }
  .sidebar-header {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-logo-link {
    justify-content: center;
    width: 100%;
  }
  .sidebar-logo-link .logo {
    display: none;
  }
  .sidebar-logo-link .logo-symbol {
    display: flex;
  }
}
@media (max-width: 768px) {
  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 300;
  }
  .sidebar.sidebar-mobile-open {
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 299;
  }
  .sidebar-close-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    z-index: 10;
  }
  .sidebar-close-btn:hover,
  .sidebar-close-btn:active {
    background: transparent;
    opacity: 0;
  }
  .sidebar-header {
    padding: 20px 16px;
    display: flex;
    align-items: center;
  }
  .sidebar-logo-link {
    width: auto;
    justify-content: flex-start;
  }
  .sidebar-logo-link .logo {
    display: flex;
  }
  .sidebar-logo-link .logo-symbol {
    display: none;
  }
}
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar-nav-label {
    display: none;
  }
  .sidebar-logout-btn {
    display: none;
  }
}
.sidebar-admin-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
}
.sidebar-admin-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.9;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.18s;
  text-align: left;
}
.sidebar-admin-section-label:hover {
  opacity: 1;
  background: var(--color-accent-glow);
}
.sidebar-admin-section-label .sidebar-chevron {
  margin-left: auto;
}
.sidebar-admin-item-indented {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-section-icon-img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.sidebar-section-icon-emoji {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* src/components/Logo/Logo.css */
.logo {
  display: flex;
  align-items: center;
  user-select: none;
}
.logo-img {
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.logo-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.logo-symbol-img {
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(74, 255, 197, 0.25));
}

/* src/components/Header/Header.css */
.header {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--header-height);
  background: var(--color-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 100;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 6px;
  border-radius: 8px;
  display: none;
  align-items: center;
  transition: var(--transition);
}
.header-menu-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-user--clickable {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  transition: all 0.15s ease;
  text-decoration: none;
}
.header-user--clickable:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.header-user-chevron {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.header-user--clickable:hover .header-user-chevron {
  transform: translateY(1px);
}
.header-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.header-theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 7px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.header-theme-toggle:hover {
  background: var(--color-surface-2);
  color: var(--color-accent);
  border-color: var(--color-border-accent);
  transform: rotate(12deg) scale(1.05);
}
@media (max-width: 1024px) {
  .header {
    left: 72px;
  }
}
@media (max-width: 768px) {
  .header {
    left: 0;
    padding: 0 14px;
    height: 72px;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border-accent);
  }
  .header-menu-btn {
    display: flex;
    flex-shrink: 0;
  }
  .header-title {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
  .header-user-name {
    display: none;
  }
  .header-left {
    gap: 10px;
    min-width: 0;
  }
}

/* src/components/ui/Badge/Badge.css */
.badge {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
  white-space: nowrap;
}
.badge-sm {
  font-size: 10px;
  padding: 2px 8px;
}
.badge-md {
  font-size: 11px;
  padding: 3px 10px;
}
.badge-lg {
  font-size: 13px;
  padding: 5px 14px;
}
.badge-success {
  background: var(--color-success-bg);
  color: var(--color-accent);
  border: 1px solid rgba(74, 255, 197, 0.2);
}
.badge-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(255, 77, 109, 0.2);
}
.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid rgba(255, 179, 71, 0.2);
}
.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid rgba(96, 165, 250, 0.2);
}
.badge-new {
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.2),
      rgba(45, 212, 160, 0.2));
  color: var(--color-accent);
  border: 1px solid var(--color-border-accent);
  animation: mintPulse 2s ease-in-out infinite;
}
.badge-soon {
  background: rgba(255, 179, 71, 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(255, 179, 71, 0.2);
  font-size: 10px;
  padding: 2px 7px;
}
.badge-admin {
  background: rgba(167, 139, 250, 0.1);
  color: #A78BFA;
  border: 1px solid rgba(167, 139, 250, 0.2);
}
[data-theme=light] .badge-success {
  background: rgba(26, 107, 232, 0.10);
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .badge-new {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.14),
      rgba(18, 80, 176, 0.10));
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.25);
}
[data-theme=light] .badge-error {
  background: rgba(220, 38, 38, 0.09);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.22);
}
[data-theme=light] .badge-info {
  background: rgba(37, 99, 235, 0.09);
  color: #2563EB;
  border-color: rgba(37, 99, 235, 0.22);
}

/* src/components/UserProfileModal/UserProfileModal.css */
.upm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: upm-fade-in 0.2s ease;
}
@keyframes upm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.upm-modal {
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: upm-slide-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes upm-slide-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.upm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.upm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #00c9ff 0%,
      #00bcd4 100%);
  color: #000;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.15);
}
.upm-header-info {
  flex: 1;
  min-width: 0;
}
.upm-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #fff);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upm-role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 201, 255, 0.12);
  color: #00c9ff;
  border: 1px solid rgba(0, 201, 255, 0.25);
}
.upm-close {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary, #999);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.upm-close:hover {
  background: rgba(255, 77, 109, 0.15);
  color: #ff4d6d;
}
.upm-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
  flex-shrink: 0;
}
.upm-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: none;
  color: var(--color-text-secondary, #999);
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 2px solid transparent;
}
.upm-tab:hover {
  color: var(--color-text, #fff);
  background: rgba(255, 255, 255, 0.04);
}
.upm-tab--active {
  color: #00c9ff;
  background: rgba(0, 201, 255, 0.06);
  border-bottom-color: #00c9ff;
}
.upm-tab-icon {
  font-size: 14px;
}
.upm-body {
  overflow-y: auto;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.upm-body::-webkit-scrollbar {
  width: 4px;
}
.upm-body::-webkit-scrollbar-track {
  background: transparent;
}
.upm-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.upm-section {
  padding: 4px 0 16px;
}
.upm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.upm-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
  margin: 0 0 12px;
}
.upm-section-header .upm-section-label {
  margin-bottom: 0;
}
.upm-section-desc {
  font-size: 13px;
  color: var(--color-text-secondary, #999);
  margin: 0 0 16px;
  line-height: 1.5;
}
.upm-divider {
  height: 1px;
  background: var(--color-border, rgba(255,255,255,0.06));
  margin: 4px 0 16px;
}
.upm-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.upm-field-ro {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upm-field-ro--full {
  grid-column: 1 / -1;
}
.upm-field-ro-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #666);
}
.upm-field-ro-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #fff);
  word-break: break-all;
}
.upm-edit-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(0, 201, 255, 0.08);
  border: 1px solid rgba(0, 201, 255, 0.2);
  color: #00c9ff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.upm-edit-btn:hover {
  background: rgba(0, 201, 255, 0.14);
  border-color: rgba(0, 201, 255, 0.35);
}
.upm-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.upm-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upm-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #999);
}
.upm-form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-text, #fff);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.upm-form-input::placeholder {
  color: var(--color-text-muted, #555);
}
.upm-form-input:focus {
  border-color: #00c9ff;
  box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.12);
}
.upm-pw-wrapper {
  position: relative;
}
.upm-pw-wrapper .upm-form-input {
  padding-right: 42px;
}
.upm-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted, #555);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}
.upm-pw-toggle:hover {
  color: var(--color-text-secondary, #999);
}
.upm-pw-mismatch {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}
.upm-pw-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.upm-pw-strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
}
.upm-pw-strength-bar {
  height: 4px;
  flex: 1;
  border-radius: 4px;
  transition: background 0.3s ease;
}
.upm-pw-strength-label {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.upm-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.upm-msg--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #22c55e;
}
.upm-msg--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.upm-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.upm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  min-width: 100px;
}
.upm-btn--primary {
  background:
    linear-gradient(
      135deg,
      #00c9ff 0%,
      #0099cc 100%);
  color: #000;
}
.upm-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.upm-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.upm-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary, #999);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
}
.upm-btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text, #fff);
}
.upm-btn--full {
  width: 100%;
}
.upm-ticket-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 4px;
}
.upm-ticket-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.upm-ticket-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.upm-ticket-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #fff);
  margin: 0 0 2px;
}
.upm-ticket-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #999);
  margin: 0;
}
.upm-btn--ticket {
  background: rgba(255, 165, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.25);
  color: #ffa500;
  white-space: nowrap;
  padding: 8px 16px;
  min-width: unset;
  font-size: 12px;
}
.upm-btn--ticket:hover {
  background: rgba(255, 165, 0, 0.18);
  border-color: rgba(255, 165, 0, 0.4);
}
.upm-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: upm-spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes upm-spin {
  to {
    transform: rotate(360deg);
  }
}
.upm-pw-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.upm-body .rp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.upm-body .rp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
}
.upm-body .rp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.upm-body .rp-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 42px 11px 14px;
  font-size: 14px;
  color: var(--color-text, #e2e8f0);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}
.upm-body .rp-input::placeholder {
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.5;
}
.upm-body .rp-input:focus {
  border-color: rgba(0, 198, 167, 0.5);
  background: rgba(0, 198, 167, 0.04);
}
.upm-body .rp-input-error {
  border-color: rgba(255, 77, 109, 0.5) !important;
}
.upm-body .rp-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-secondary, #94a3b8);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.upm-body .rp-eye:hover {
  color: var(--color-text, #e2e8f0);
}
.upm-body .rp-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.upm-body .rp-strength-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.upm-body .rp-strength-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s, background 0.3s;
}
.upm-body .rp-strength-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 48px;
  text-align: right;
}
.upm-body .rp-criteria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: 4px;
}
.upm-body .rp-criterion {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.upm-body .rp-criterion.valid {
  color: #4affc5;
  opacity: 1;
}
.upm-body .rp-field-error {
  font-size: 12px;
  color: #FF4D6D;
  margin-top: 2px;
}
.upm-body .rp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #FF4D6D;
}
.upm-body .rp-btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #00C6A7,
      #0099a8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  margin-top: 4px;
}
.upm-body .rp-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.upm-body .rp-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.upm-body .rp-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rp-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes rp-spin {
  to {
    transform: rotate(360deg);
  }
}
.upm-pw-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 8px;
  gap: 8px;
}
.upm-pw-success-icon {
  font-size: 48px;
}
.upm-pw-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #4affc5;
  margin: 0;
}
.upm-pw-success-desc {
  font-size: 14px;
  color: var(--color-text-secondary, #94a3b8);
  margin: 0 0 8px;
}
.upm-pw-back-btn {
  margin-top: 8px;
}
@media (max-width: 540px) {
  .upm-modal {
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    align-self: flex-end;
  }
  .upm-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .upm-fields-grid {
    grid-template-columns: 1fr;
  }
  .upm-ticket-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .upm-btn--ticket {
    align-self: stretch;
    justify-content: center;
  }
}
[data-theme=light] .upm-modal {
  background: var(--color-surface, #ffffff);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .upm-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .upm-form-input {
  background: #f5f7fa;
  border: 1.5px solid #c8d0dd;
  color: #0F1923;
}
[data-theme=light] .upm-form-input::placeholder {
  color: #8a98af;
}
[data-theme=light] .upm-form-input:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.14);
  background: #ffffff;
}
[data-theme=light] .upm-body .rp-input {
  background: #f5f7fa;
  border: 1.5px solid #c8d0dd;
  color: #0F1923;
}
[data-theme=light] .upm-body .rp-input::placeholder {
  color: #8a98af;
  opacity: 1;
}
[data-theme=light] .upm-body .rp-input:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.14);
  background: #ffffff;
}
[data-theme=light] .upm-body .rp-input-error {
  border-color: #D93025 !important;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1) !important;
}
[data-theme=light] .upm-body .rp-eye {
  color: #5A6680;
}
[data-theme=light] .upm-body .rp-eye:hover {
  color: #0F1923;
}
[data-theme=light] .upm-pw-toggle {
  color: #5A6680;
}
[data-theme=light] .upm-pw-toggle:hover {
  color: #0F1923;
}
[data-theme=light] .upm-body .rp-criterion {
  color: #5A6680;
  opacity: 0.9;
}
[data-theme=light] .upm-body .rp-criterion.valid {
  color: #0D8050;
  opacity: 1;
}
[data-theme=light] .upm-body .rp-strength-bar {
  background: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .upm-field-ro {
  background: #f5f7fa;
  border-color: #d1d9e4;
}
[data-theme=light] .upm-field-ro-label {
  color: #5A6680;
}
[data-theme=light] .upm-field-ro-value {
  color: #0F1923;
}
[data-theme=light] .upm-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0F1923;
}
[data-theme=light] .upm-tab--active {
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.06);
  border-bottom-color: #1A6BE8;
}
[data-theme=light] .upm-close {
  background: rgba(0, 0, 0, 0.05);
  color: #5A6680;
}
[data-theme=light] .upm-close:hover {
  background: rgba(217, 48, 37, 0.1);
  color: #D93025;
}
[data-theme=light] .upm-btn--ghost {
  background: rgba(0, 0, 0, 0.04);
  color: #5A6680;
  border-color: #c8d0dd;
}
[data-theme=light] .upm-btn--ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: #0F1923;
}
[data-theme=light] .upm-divider {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .upm-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .upm-ticket-cta {
  background: #f5f7fa;
  border-color: #d1d9e4;
}
[data-theme=light] .upm-body .rp-error {
  background: rgba(217, 48, 37, 0.08);
  border-color: rgba(217, 48, 37, 0.25);
  color: #D93025;
}
.upm-notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upm-notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}
.upm-notif-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.upm-notif-item--active {
  border-color: rgba(74, 255, 197, 0.25);
  background: rgba(74, 255, 197, 0.05);
}
.upm-notif-item--active:hover {
  background: rgba(74, 255, 197, 0.08);
}
.upm-notif-item--blocked {
  opacity: 0.6;
}
.upm-notif-item--loading {
  opacity: 0.75;
  pointer-events: none;
}
.upm-notif-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.upm-notif-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.upm-notif-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text, #f0f2f5);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.upm-notif-desc {
  font-size: 0.77rem;
  color: var(--color-text-secondary, #8892a4);
  line-height: 1.5;
}
.upm-notif-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.upm-notif-badge--active {
  background: rgba(74, 255, 197, 0.15);
  color: #4AFFC5;
}
.upm-notif-badge--blocked {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.upm-notif-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  padding: 0 3px;
}
.upm-notif-switch--on {
  background: #4AFFC5;
  border-color: #4AFFC5;
}
.upm-notif-knob {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.upm-notif-switch--on .upm-notif-knob {
  transform: translateX(20px);
  background: var(--color-bg, #0a0f1c);
}
.upm-guide-box {
  position: relative;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.2rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  animation: upm-guide-in 0.2s ease;
}
@keyframes upm-guide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.upm-guide-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.upm-guide-close:hover {
  background: rgba(255, 255, 255, 0.07);
}
.upm-guide-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.upm-guide-img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.upm-guide-steps {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding-left: 1.1rem;
  margin: 0;
  line-height: 1.9;
}
.upm-guide-steps li {
  color: var(--color-text);
}
.upm-guide-steps strong {
  color: #4AFFC5;
}
.upm-guide-ok {
  align-self: flex-end;
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
  color: #0a0f1a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.upm-guide-ok:hover {
  opacity: 0.85;
}
[data-theme=light] .upm-guide-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme=light] .upm-guide-title {
  color: #1e293b;
}
[data-theme=light] .upm-guide-steps li {
  color: #1e293b;
}
[data-theme=light] .upm-guide-steps strong {
  color: #1A6BE8;
}
[data-theme=light] .upm-guide-ok {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
  color: #fff;
}

/* src/components/NotificationBell/NotificationBell.css */
.nb-root {
  position: relative;
  display: flex;
  align-items: center;
}
.nb-bell {
  position: relative;
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 7px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.nb-bell:hover,
.nb-bell--open {
  background: var(--color-surface-2);
  color: var(--color-accent);
  border-color: var(--color-border-accent);
}
.nb-bell--open svg {
  animation: nb-ring 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes nb-ring {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
}
.nb-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #e02a4d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--color-header-bg, #0d0d0d);
  animation: nb-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
@keyframes nb-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.nb-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--color-surface, #111);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: nb-slide-in 0.22s cubic-bezier(0.34, 1.1, 0.64, 1);
}
@keyframes nb-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.nb-drop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.nb-drop-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nb-drop-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(224, 42, 77, 0.15);
  color: #e02a4d;
  border: 1px solid rgba(224, 42, 77, 0.25);
  border-radius: 999px;
  padding: 1px 8px;
}
.nb-mark-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--color-accent);
  font-family: var(--font-primary);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.nb-mark-all:hover {
  background: rgba(74, 255, 197, 0.08);
}
.nb-list {
  overflow-y: auto;
  flex: 1;
}
.nb-list::-webkit-scrollbar {
  width: 4px;
}
.nb-list::-webkit-scrollbar-track {
  background: transparent;
}
.nb-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.nb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}
.nb-empty-icon {
  font-size: 32px;
  opacity: 0.4;
}
.nb-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
  position: relative;
}
.nb-item:last-child {
  border-bottom: none;
}
.nb-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.nb-item--unread {
  background: rgba(74, 255, 197, 0.04);
}
.nb-item--unread:hover {
  background: rgba(74, 255, 197, 0.07);
}
.nb-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.nb-item-body {
  flex: 1;
  min-width: 0;
}
.nb-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.nb-item-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.nb-item-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}
.nb-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 3px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nb-item-body-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nb-item-body-html * {
  font-size: 12px;
}
.nb-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 6px rgba(74, 255, 197, 0.5);
}
[data-theme=light] .nb-bell {
  color: #64748b;
  border-color: #e2e8f0;
}
[data-theme=light] .nb-bell:hover,
[data-theme=light] .nb-bell--open {
  background: #f1f5f9;
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.3);
}
[data-theme=light] .nb-badge {
  border-color: #fff;
}
[data-theme=light] .nb-dropdown {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme=light] .nb-drop-header {
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .nb-drop-title {
  color: #1e293b;
}
[data-theme=light] .nb-mark-all {
  color: #1A6BE8;
}
[data-theme=light] .nb-mark-all:hover {
  background: rgba(26, 107, 232, 0.07);
}
[data-theme=light] .nb-empty {
  color: #94a3b8;
}
[data-theme=light] .nb-item {
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .nb-item:hover {
  background: #f8fafc;
}
[data-theme=light] .nb-item--unread {
  background: rgba(26, 107, 232, 0.04);
}
[data-theme=light] .nb-item--unread:hover {
  background: rgba(26, 107, 232, 0.07);
}
[data-theme=light] .nb-item-title {
  color: #1e293b;
}
[data-theme=light] .nb-item-body-text {
  color: #64748b;
}
[data-theme=light] .nb-item-time {
  color: #94a3b8;
}
[data-theme=light] .nb-item-dot {
  background: #1A6BE8;
  box-shadow: 0 0 6px rgba(26, 107, 232, 0.4);
}
[data-theme=light] .nb-drop-count {
  background: rgba(224, 42, 77, 0.08);
  border-color: rgba(224, 42, 77, 0.2);
}
@media (max-width: 768px) {
  .nb-dropdown {
    position: fixed;
    top: 80px;
    right: 16px;
    left: auto;
    width: calc(100vw - 32px);
    max-width: 360px;
    max-height: calc(100vh - 100px);
  }
}
.nb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: nb-fade-in 0.2s ease;
}
@keyframes nb-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.nb-modal {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: nb-modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes nb-modal-pop {
  from {
    transform: scale(0.94) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.nb-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nb-modal-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.nb-modal-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nb-modal-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.nb-modal-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
.nb-modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.nb-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.nb-modal-img-wrap {
  width: 100%;
  max-height: 200px;
  overflow: hidden;
}
.nb-modal-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.nb-modal-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nb-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.3;
}
.nb-modal-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}
.nb-modal-text * {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}
.nb-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  text-decoration: none;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.nb-modal-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}
[data-theme=light] .nb-modal {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}
[data-theme=light] .nb-modal-header {
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .nb-modal-time {
  color: #94a3b8;
}
[data-theme=light] .nb-modal-close {
  background: rgba(0, 0, 0, 0.05);
  color: #64748b;
}
[data-theme=light] .nb-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}
[data-theme=light] .nb-modal-title {
  color: #1e293b;
}
[data-theme=light] .nb-modal-text {
  color: #475569;
}
[data-theme=light] .nb-modal-text * {
  color: #475569;
}
[data-theme=light] .nb-modal-overlay {
  background: rgba(0, 0, 0, 0.45);
}

/* src/components/AnnouncementModal/AnnouncementModal.css */
.ann-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: ann-fade-in 0.25s ease;
}
@keyframes ann-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ann-modal {
  position: relative;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 0 0 1px var(--ann-color, #0ea5e9) inset, 0 24px 64px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  overflow: hidden;
  animation: ann-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 0;
}
@keyframes ann-slide-up {
  from {
    transform: translateY(32px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.ann-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  gap: 12px;
}
.ann-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ann-bg, rgba(14,165,233,0.12));
  border: 1px solid color-mix(in srgb, var(--ann-color, #0ea5e9) 40%, transparent);
  color: var(--ann-color, #0ea5e9);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
}
.ann-badge-icon {
  font-size: 14px;
  line-height: 1;
}
.ann-badge-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ann-progress {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ann-img-wrap {
  width: 100%;
  padding: 4px 6px 8px;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
}
.ann-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
}
.ann-body {
  padding: 16px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ann-title {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.3;
}
.ann-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}
.ann-content--html {
  color: rgba(255, 255, 255, 0.75);
}
.ann-content--html p {
  margin: 0 0 8px;
}
.ann-content--html h1,
.ann-content--html h2,
.ann-content--html h3 {
  color: #f1f5f9;
  margin: 8px 0;
}
.ann-content--html a {
  color: var(--ann-color, #0ea5e9);
}
.ann-content--html strong {
  color: #f1f5f9;
}
.ann-content--html ul,
.ann-content--html ol {
  padding-left: 20px;
}
.ann-progress-bar-wrap {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
}
.ann-progress-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s;
}
.ann-progress-seg--done {
  background: var(--ann-color, #0ea5e9);
}
.ann-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
}
.ann-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ann-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
}
.ann-btn-primary {
  background: var(--color-accent, #4AFFC5);
  border: none;
  color: #000;
  border-radius: 10px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.ann-btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.ann-scroll-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ann-scroll-content::-webkit-scrollbar {
  width: 4px;
}
.ann-scroll-content::-webkit-scrollbar-track {
  background: transparent;
}
.ann-scroll-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
@media (max-width: 560px) {
  .ann-modal {
    border-radius: 14px;
    max-height: calc(100vh - 32px);
    max-height: calc(100svh - 32px);
  }
  .ann-img-wrap {
    padding: 4px 6px 6px;
  }
  .ann-img {
    max-height: 60vh;
    border-radius: 8px;
  }
  .ann-title {
    font-size: 15px;
  }
}

/* src/components/FloatingChat/FloatingChatWidget.css */
.fcw-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 420px;
  height: 560px;
  background: rgba(18, 21, 30, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 99999;
  overflow: hidden;
  font-family: inherit;
  animation: fcwPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fcwPopIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.fcw-header {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fcw-header-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fcw-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fcw-chat-icon {
  font-size: 16px;
}
.fcw-ticket-num {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  font-family: monospace;
}
.fcw-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fcw-user-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.fcw-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fcw-badge-open {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.fcw-badge-progress {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.fcw-badge-awaiting {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.fcw-badge-resolved {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.fcw-badge-closed {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.fcw-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.fcw-tag-channel {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.fcw-tag-registered {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.fcw-tag-unregistered {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.fcw-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fcw-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.15s;
}
.fcw-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.fcw-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.fcw-actions-bar {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.fcw-reason-label {
  color: rgba(255, 255, 255, 0.6);
}
.fcw-quick-buttons {
  display: flex;
  gap: 6px;
}
.fcw-btn-resolve {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.fcw-btn-resolve:hover {
  background: rgba(16, 185, 129, 0.35);
}
.fcw-btn-queue {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.fcw-btn-queue:hover {
  background: rgba(245, 158, 11, 0.35);
}
.fcw-messages-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fcw-msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fcw-msg-initial {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  border-bottom-left-radius: 2px;
}
.fcw-msg-client {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
  border-bottom-left-radius: 2px;
}
.fcw-msg-admin {
  align-self: flex-end;
  background:
    linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.8),
      rgba(139, 92, 246, 0.8));
  color: #ffffff;
  border-bottom-right-radius: 2px;
}
.fcw-msg-author {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
}
.fcw-msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.fcw-msg-time {
  font-size: 10px;
  opacity: 0.65;
  align-self: flex-end;
}
.fcw-msg-system {
  align-self: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  gap: 8px;
}
.fcw-msg-attachments {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fcw-att-link {
  font-size: 11px;
  color: #a5b4fc;
  text-decoration: underline;
}
.fcw-pending-bar {
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.fcw-pending-item {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.fcw-pending-item button {
  background: transparent;
  border: none;
  color: #f87171;
  cursor: pointer;
}
.fcw-footer-composer {
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fcw-attach-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.15s;
}
.fcw-attach-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.fcw-input-textarea {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  resize: none;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.fcw-input-textarea:focus {
  border-color: #6366f1;
}
.fcw-send-btn {
  background: #6366f1;
  border: none;
  color: #fff;
  padding: 0 16px;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.fcw-send-btn:hover:not(:disabled) {
  background: #4f46e5;
}
.fcw-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fcw-minimized {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(18, 21, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 99px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.2);
  cursor: pointer;
  z-index: 99999;
  transition: transform 0.2s;
}
.fcw-minimized:hover {
  transform: translateY(-2px);
}
.fcw-min-icon {
  font-size: 16px;
}
.fcw-min-info {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: #fff;
}
.fcw-min-num {
  font-weight: 700;
  font-family: monospace;
}
.fcw-min-name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcw-min-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 2px 4px;
}
.fcw-min-btn:hover {
  color: #fff;
}

/* src/pages/Login/Login.css */
.login-page {
  --login-brand-primary: #00E5C3;
  --login-brand-dark: #00CFAF;
  --login-bg: #0A0A0A;
  --login-surface: #1C1C1E;
  --login-border: #2C2C2E;
  --login-text: #FFFFFF;
  --login-text-secondary: #8E8E93;
  --login-placeholder: #767680;
  --login-icon-inactive: #6B6B6B;
  --login-error: #FF453A;
  --login-focus: #00E5C3;
  --login-btn-text: #0A0A0A;
  --login-margin: 24px;
  --login-field-gap: 16px;
  --login-brand-to-form: 64px;
  --login-form-to-actions: 8px;
  --login-actions-gap: 20px;
  --login-input-height: 52px;
  --login-input-radius: 999px;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-bg, var(--login-bg));
  z-index: 0;
}
.login-brand {
  flex: 1 1 0;
  position: relative;
  background:
    linear-gradient(
      160deg,
      #050f0a 0%,
      #000000 55%,
      #030b08 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 64px;
  overflow: hidden;
}
.login-brand-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  animation: float 9s ease-in-out infinite;
  pointer-events: none;
}
.login-orb-1 {
  width: 500px;
  height: 500px;
  background:
    radial-gradient(
      circle,
      #4AFFC5,
      transparent 65%);
  top: -160px;
  left: -120px;
  animation-delay: 0s;
}
.login-orb-2 {
  width: 320px;
  height: 320px;
  background:
    radial-gradient(
      circle,
      #2DD4A0,
      transparent 70%);
  bottom: 60px;
  right: -80px;
  animation-delay: -4s;
  opacity: 0.14;
}
.login-orb-3 {
  width: 240px;
  height: 240px;
  background:
    radial-gradient(
      circle,
      #4AFFC5,
      transparent 70%);
  top: 55%;
  left: 40%;
  transform: translate(-50%, -50%);
  animation-delay: -6s;
  opacity: 0.07;
}
.login-brand-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.login-brand-logo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.login-brand-logo-img {
  width: auto;
  height: 72px;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter: drop-shadow(0 0 24px rgba(74, 255, 197, 0.15));
  animation: fadeInUp 0.6s ease both;
}
.login-brand-portal-label {
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4AFFC5;
  text-transform: uppercase;
  animation: fadeInUp 0.7s ease 0.1s both;
}
.login-form-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  min-width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: #050505;
  border-left: 1px solid var(--color-border, #2C2C2E);
  box-sizing: border-box;
  overflow-y: auto;
}
.login-brand {
  margin-right: 480px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeInUp 0.5s ease both;
}
.login-heading-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.login-heading {
  font-family: "Sora", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0;
}
.login-subheading {
  font-size: 14px;
  color: var(--login-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.login-card-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.login-mobile-brand {
  display: none;
}
.login-logo-mobile-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.login-mobile-brand-label {
  font-family:
    "Inter",
    "Sora",
    sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #00E5C3;
  text-transform: uppercase;
  text-align: center;
}
.login-fields {
  display: flex;
  flex-direction: column;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--login-field-gap);
}
.login-form .input-field {
  border-radius: var(--login-input-radius) !important;
  height: var(--login-input-height);
  background: var(--login-surface) !important;
  border-color: var(--login-border) !important;
  color: var(--login-text) !important;
  font-size: 14px;
}
.login-form .input-field-wrap {
  border-radius: var(--login-input-radius);
}
.login-form .input-field:focus {
  border-color: var(--login-focus) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 195, 0.12) !important;
}
.login-form .login-submit-btn,
.login-actions > button[type=submit],
.login-actions .btn-primary {
  height: var(--login-input-height);
  border-radius: var(--login-input-radius);
  background:
    linear-gradient(
      135deg,
      #00E5C3,
      #00CFAF) !important;
  color: var(--login-btn-text) !important;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  border: none;
  letter-spacing: 0.01em;
}
.login-actions > button[type=submit]:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      #00CFAF,
      #00B89A) !important;
}
.login-actions {
  display: flex;
  flex-direction: column;
  gap: var(--login-actions-gap);
  margin-top: var(--login-form-to-actions);
}
.login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--login-error);
  background: rgba(255, 69, 58, 0.08);
  border: 1px solid rgba(255, 69, 58, 0.22);
  border-radius: 10px;
  padding: 10px 14px;
  animation: fadeIn 0.2s ease;
}
.login-forgot {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--login-text-secondary);
  font-family: var(--font-primary, "Inter", sans-serif);
  text-align: center;
  text-decoration: none;
  transition: color 0.2s;
  padding: 8px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-forgot:hover {
  color: #FFFFFF;
}
.login-recaptcha-notice {
  font-size: 11px;
  color: var(--color-text-secondary, var(--login-text-secondary));
  text-align: center;
  opacity: 0.45;
  line-height: 1.6;
  margin-top: 4px;
  font-family: var(--font-primary, "Inter", sans-serif);
}
.login-recaptcha-notice a {
  color: var(--color-text-secondary, var(--login-text-secondary));
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.2s, opacity 0.2s;
}
.login-recaptcha-notice a:hover {
  color: #00E5C3;
  opacity: 1;
}
@media (max-width: 900px) {
  .login-brand {
    display: none;
  }
  .login-form-side {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-left: none;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--login-bg);
  }
  .login-card {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    justify-content: space-between;
    gap: 0;
    padding: env(safe-area-inset-top, 32px) var(--login-margin) env(safe-area-inset-bottom, 32px);
    box-sizing: border-box;
  }
  .login-mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 8px;
    flex-shrink: 0;
  }
  .login-logo-mobile-img {
    height: 44px;
    filter: drop-shadow(0 0 16px rgba(0, 229, 195, 0.2));
  }
  .login-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
  .login-form {
    gap: var(--login-field-gap);
  }
  .login-actions {
    flex-shrink: 0;
    padding-bottom: 24px;
    gap: var(--login-actions-gap);
    margin-top: var(--login-form-to-actions);
  }
  .login-recaptcha-notice {
    margin-top: 12px;
    padding-bottom: 8px;
  }
}
@media (max-width: 480px) {
  .login-card {
    padding-left: var(--login-margin);
    padding-right: var(--login-margin);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(4deg);
  }
  66% {
    transform: translateY(10px) rotate(-3deg);
  }
}
@keyframes shake {
  10%, 90% {
    transform: translateX(-3px);
  }
  20%, 80% {
    transform: translateX(4px);
  }
  30%, 50%, 70% {
    transform: translateX(-5px);
  }
  40%, 60% {
    transform: translateX(5px);
  }
}

/* src/components/ui/Input/Input.css */
.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
.input-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--font-primary);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  outline: none;
  -webkit-appearance: none;
}
.input-field::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.input-field:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}
.input-field:focus {
  border-color: rgba(74, 255, 197, 0.5);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.1);
  background: rgba(255, 255, 255, 0.07);
}
.input-field:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.input-field.has-icon-left {
  padding-left: 44px;
}
.input-field.has-icon-right {
  padding-right: 44px;
}
.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.input-icon-left {
  left: 14px;
}
.input-icon-right {
  right: 14px;
}
.input-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: all;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-text-secondary);
  transition: color 0.2s;
}
.input-icon-btn:hover {
  color: var(--color-text);
}
.input-error .input-field {
  border-color: rgba(255, 77, 109, 0.5);
}
.input-error .input-field:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.1);
}
.input-helper {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.input-helper-error {
  color: var(--color-error);
}
select.input-field {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A0A0A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
select.input-field option {
  background-color: #1a1a1a;
  color: #ffffff;
}
textarea.input-field {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}
[data-theme=light] .input-field {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--color-text);
}
[data-theme=light] .input-field::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme=light] .input-field:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.28);
  background: #ffffff;
}
[data-theme=light] .input-field:focus {
  border-color: rgba(26, 107, 232, 0.60);
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.12);
  background: #ffffff;
}
[data-theme=light] select.input-field option {
  background-color: #ffffff;
  color: #0F1923;
}
[data-theme=light] .input-error .input-field {
  border-color: rgba(220, 38, 38, 0.55);
}
[data-theme=light] .input-error .input-field:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* src/components/ForgotPassword/ForgotPasswordModal.css */
.fpm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: fpm-fade-in 0.2s ease;
}
@keyframes fpm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fpm-modal {
  background: var(--color-surface, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.fpm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary, #94a3b8);
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}
.fpm-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text, #e2e8f0);
}
.fpm-content {
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.fpm-slide-in {
  animation: fpm-slide 0.25s ease;
}
@keyframes fpm-slide {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fpm-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.fpm-icon-blue {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}
.fpm-icon-purple {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}
.fpm-icon-green {
  background: rgba(74, 255, 197, 0.15);
  color: #4affc5;
}
.fpm-done .fpm-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  align-self: center;
}
.fpm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.fpm-desc {
  font-size: 14px;
  color: var(--color-text-secondary, #94a3b8);
  margin: 0 0 20px;
  line-height: 1.55;
}
.fpm-desc-center {
  text-align: center;
  align-self: center;
}
.fpm-desc-small {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  text-align: center;
  align-self: center;
  margin-top: -8px;
  margin-bottom: 16px;
  opacity: 0.75;
}
.fpm-done {
  align-items: center;
  text-align: center;
}
.fpm-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.fpm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fpm-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  letter-spacing: 0.02em;
}
.fpm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.fpm-input-icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.fpm-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 14px 11px 40px;
  font-size: 14px;
  color: var(--color-text, #e2e8f0);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}
.fpm-input::placeholder {
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.5;
}
.fpm-input:focus {
  border-color: rgba(0, 198, 167, 0.5);
  background: rgba(0, 198, 167, 0.04);
}
.fpm-btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #00C6A7,
      #0099a8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}
.fpm-btn-primary:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
}
.fpm-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.fpm-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fpm-btn-secondary {
  margin-top: 4px;
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
.fpm-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #e2e8f0);
}
.fpm-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.fpm-links-center {
  justify-content: center;
  margin-bottom: 8px;
}
.fpm-links-sep {
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.4;
  font-size: 12px;
}
.fpm-link {
  background: none;
  border: none;
  color: var(--color-primary, #00C6A7);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  font-family: inherit;
  transition: opacity 0.2s;
}
.fpm-link:hover {
  opacity: 0.8;
}
.fpm-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  font-family: inherit;
  transition: color 0.2s;
}
.fpm-back:hover {
  color: var(--color-text, #e2e8f0);
}
.fpm-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fpm-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes fpm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* src/pages/ChangePassword/ChangePassword.css */
.cp-page {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background-image:
    radial-gradient(
      ellipse at 20% 20%,
      rgba(74, 255, 197, 0.04) 0%,
      transparent 50%),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(45, 212, 160, 0.03) 0%,
      transparent 50%);
}
.cp-card {
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 48px 40px;
  animation: fadeInUp 0.4s ease;
}
.cp-icon {
  font-size: 40px;
  margin-bottom: 16px;
}
.cp-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.cp-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}
.cp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cp-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-strength-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.cp-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease, background 0.4s ease;
}
.cp-strength-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}
.cp-criteria {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.cp-criterion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: color 0.2s;
}
.cp-criterion.valid {
  color: var(--color-text-muted);
}
.cp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid rgba(255, 77, 109, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
}
.cp-logout {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  text-align: center;
  margin-top: 20px;
  display: block;
  width: 100%;
  transition: color 0.2s;
}
.cp-logout:hover {
  color: var(--color-error);
}

/* src/pages/Dashboard/Dashboard.css */
.bi-page {
  padding: 32px 28px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeInUp 0.35s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.bi-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.bi-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.bi-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}
.bi-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bi-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--color-text);
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.bi-select:hover,
.bi-select:focus {
  border-color: rgba(74, 255, 197, 0.4);
}
.bi-refresh-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--color-text);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s;
}
.bi-refresh-btn:hover {
  border-color: rgba(74, 255, 197, 0.4);
  background: rgba(74, 255, 197, 0.08);
  transform: rotate(30deg);
}
.bi-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1024px) {
  .bi-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bi-kpi-card,
.bi-ticket-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
  overflow: hidden;
}
.bi-kpi-card:hover,
.bi-ticket-card:hover {
  border-color: rgba(74, 255, 197, 0.18);
  box-shadow: 0 0 24px rgba(74, 255, 197, 0.06);
}
.bi-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.bi-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.bi-kpi-value--accent {
  color: #4AFFC5;
}
.bi-kpi-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.7;
  overflow-wrap: break-word;
  word-break: break-word;
}
.bi-kpi-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.bi-delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: fadeInUp 0.4s ease;
}
.bi-delta-badge--up {
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.22);
}
.bi-delta-badge--down {
  background: rgba(255, 90, 90, 0.1);
  color: #ff7a7a;
  border: 1px solid rgba(255, 90, 90, 0.2);
}
.bi-ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bi-ticket-tabs {
  display: flex;
  gap: 4px;
}
.bi-ticket-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.bi-ticket-tab.active {
  background: #4AFFC5;
  border-color: #4AFFC5;
  color: #0a1420;
}
.bi-ticket-tab:hover:not(.active) {
  border-color: rgba(74, 255, 197, 0.3);
  color: var(--color-text);
}
.bi-chart-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.2s;
}
.bi-chart-card:hover {
  border-color: rgba(74, 255, 197, 0.12);
}
.bi-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bi-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.bi-chart-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.65;
}
.bi-chart-wrapper {
  height: 280px;
  position: relative;
}
.bi-chart-empty {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  opacity: 0.6;
}
.bi-admin-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bi-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
}
.bi-search-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.55;
}
.bi-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--color-text);
  padding: 9px 36px 9px 36px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.bi-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.bi-search-input:focus {
  border-color: rgba(74, 255, 197, 0.4);
  background: rgba(74, 255, 197, 0.03);
}
.bi-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.bi-search-clear:hover {
  color: var(--color-text);
}
.bi-search-icon--spin {
  animation: spin 0.9s linear infinite;
  display: inline-block;
}
.bi-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #0f1c2a;
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 255, 197, 0.05);
  z-index: 100;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.bi-suggestions::-webkit-scrollbar {
  width: 4px;
}
.bi-suggestions::-webkit-scrollbar-track {
  background: transparent;
}
.bi-suggestions::-webkit-scrollbar-thumb {
  background: rgba(74, 255, 197, 0.2);
  border-radius: 2px;
}
.bi-suggestion-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}
.bi-suggest-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(74, 255, 197, 0.2);
  border-top-color: #4AFFC5;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.bi-suggestion-empty {
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  text-align: center;
}
.bi-suggestion-item {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.bi-suggestion-item:last-child {
  border-bottom: none;
}
.bi-suggestion-item:hover {
  background: rgba(74, 255, 197, 0.06);
}
.bi-suggest-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bi-suggest-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.bi-suggest-match-badge {
  font-size: 10px;
  font-weight: 600;
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bi-suggest-secondary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bi-suggest-sub-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.bi-suggest-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}
.bi-group-select {
  min-width: 180px;
}
.bi-clear-filters-btn {
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 10px;
  color: #ff8888;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.2s;
}
.bi-clear-filters-btn:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: rgba(255, 100, 100, 0.4);
}
.bi-admin-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(74, 255, 197, 0.04);
  border: 1px solid rgba(74, 255, 197, 0.12);
  border-radius: 10px;
  margin-bottom: -8px;
}
.bi-admin-context-icon {
  font-size: 16px;
}
.bi-admin-context-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.bi-bottom-row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .bi-bottom-row {
    grid-template-columns: 1fr;
  }
}
.bi-ritm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  height: 100%;
}
.bi-ritm-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.2s;
}
.bi-ritm-card:hover {
  border-color: rgba(74, 255, 197, 0.15);
}
.bi-ritm-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.bi-ritm-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.bi-ritm-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.65;
}
.bi-progress-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bi-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.bi-progress-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.65;
  margin: -10px 0 0;
}
.bi-progress-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bi-progress-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.bi-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
}
.bi-progress-fill {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #4AFFC5,
      #2DD4A0);
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(74, 255, 197, 0.4);
}
.bi-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.65;
}
.bi-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.bi-progress-row-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.bi-progress-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.bi-progress-row-value--accent {
  color: #4AFFC5;
  font-size: 16px;
  font-weight: 700;
}
.bi-progress-note {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.55;
  line-height: 1.6;
  margin: 0;
}
.bi-table-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
}
.bi-table-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.bi-table-wrapper {
  overflow-x: auto;
}
.bi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bi-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bi-table td {
  padding: 12px 16px;
  color: var(--color-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.bi-table tr:last-child td {
  border-bottom: none;
}
.bi-table-total td {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}
.bi-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.bi-badge--fgts {
  background: rgba(74, 255, 197, 0.15);
  color: #4AFFC5;
}
.bi-badge--clt {
  background: rgba(74, 197, 255, 0.15);
  color: #4AC5FF;
}
.bi-upload-card {
  background: rgba(74, 255, 197, 0.04);
  border: 1px dashed rgba(74, 255, 197, 0.25);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.bi-upload-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}
.bi-upload-icon {
  font-size: 28px;
}
.bi-upload-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px;
}
.bi-upload-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
}
.bi-upload-btn {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #2DD4A0);
  border: none;
  border-radius: 10px;
  color: #0a1420;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s, transform 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.bi-upload-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.bi-upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bi-upload-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(10, 20, 32, 0.3);
  border-top-color: #0a1420;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.bi-upload-result {
  width: 100%;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 1.5;
}
.bi-upload-result--ok {
  background: rgba(74, 255, 197, 0.08);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: var(--color-text);
}
.bi-upload-result--err {
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.2);
  color: #ff8888;
}
.bi-upload-warn {
  color: #ffcc66;
}
.bi-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 24px;
  color: var(--color-text-secondary);
  font-size: 15px;
}
.bi-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(74, 255, 197, 0.2);
  border-top-color: #4AFFC5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.bi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 12px;
}
.bi-empty-icon {
  font-size: 52px;
}
.bi-empty h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.bi-empty p {
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 380px;
  line-height: 1.65;
  margin: 0;
}
.bi-error {
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14px;
  color: #ff8888;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) {
  .bi-bottom-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .bi-ritm-grid {
    height: auto;
    grid-template-rows: auto;
  }
}
@media (max-width: 600px) {
  .bi-page {
    padding: 0;
    gap: 16px;
  }
  .bi-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .bi-header-left {
    min-width: 0;
    width: 100%;
  }
  .bi-title {
    font-size: 20px;
  }
  .bi-subtitle {
    font-size: 12px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
  .bi-header-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .bi-select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 7px 10px;
  }
  .bi-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .bi-kpi-card,
  .bi-ticket-card {
    padding: 14px 16px;
    gap: 6px;
  }
  .bi-kpi-label {
    font-size: 10px;
  }
  .bi-kpi-value {
    font-size: 20px;
  }
  .bi-kpi-sub {
    font-size: 11px;
  }
  .bi-ticket-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .bi-ticket-tab {
    font-size: 10px;
    padding: 3px 8px;
  }
  .bi-chart-card {
    padding: 16px 14px;
  }
  .bi-chart-wrapper {
    height: 200px;
  }
  .bi-chart-title {
    font-size: 14px;
  }
  .bi-ritm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    height: auto;
    grid-template-rows: auto;
  }
  .bi-ritm-card {
    padding: 14px 16px;
    gap: 5px;
  }
  .bi-ritm-value {
    font-size: 17px;
  }
  .bi-progress-card {
    padding: 18px 16px;
    gap: 12px;
  }
  .bi-progress-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .bi-progress-row-label {
    font-size: 12px;
    flex: 1 1 100%;
  }
  .bi-progress-row-value {
    font-size: 13px;
  }
  .bi-progress-row-value--accent {
    font-size: 14px;
  }
  .bi-progress-note {
    font-size: 10px;
  }
  .bi-table-card {
    padding: 16px 14px;
  }
  .bi-table-title {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .bi-table-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  .bi-table {
    font-size: 12px;
    min-width: 380px;
  }
  .bi-table th {
    padding: 8px 10px;
    font-size: 10px;
  }
  .bi-table td {
    padding: 10px 10px;
  }
  .bi-admin-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .bi-search-wrapper {
    min-width: 0;
  }
  .bi-group-select {
    min-width: 0;
    width: 100%;
  }
  .bi-clear-filters-btn {
    width: 100%;
    text-align: center;
  }
  .bi-admin-context {
    font-size: 12px;
  }
  .bi-upload-card {
    padding: 16px;
    gap: 14px;
  }
  .bi-upload-header {
    min-width: 0;
  }
  .bi-upload-btn {
    width: 100%;
    justify-content: center;
  }
  .bi-empty {
    padding: 48px 16px;
  }
  .bi-empty-icon {
    font-size: 40px;
  }
  .bi-empty h2 {
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  .bi-kpi-row {
    grid-template-columns: 1fr;
  }
  .bi-kpi-value {
    font-size: 24px;
  }
  .bi-ritm-grid {
    grid-template-columns: 1fr;
  }
  .bi-progress-row-label {
    flex: none;
  }
}
[data-theme=light] .bi-select {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}
[data-theme=light] .bi-select:hover,
[data-theme=light] .bi-select:focus {
  border-color: rgba(26, 107, 232, 0.5);
}
[data-theme=light] .bi-refresh-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}
[data-theme=light] .bi-refresh-btn:hover {
  border-color: rgba(26, 107, 232, 0.4);
  background: rgba(26, 107, 232, 0.06);
}
[data-theme=light] .bi-kpi-card,
[data-theme=light] .bi-ticket-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .bi-kpi-card:hover,
[data-theme=light] .bi-ticket-card:hover {
  border-color: rgba(26, 107, 232, 0.25);
  box-shadow: 0 4px 20px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .bi-kpi-value--accent {
  color: #1A6BE8;
}
[data-theme=light] .bi-ticket-tab {
  background: #f0f4f8;
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text-secondary);
}
[data-theme=light] .bi-ticket-tab.active {
  background: #1A6BE8;
  border-color: #1A6BE8;
  color: #ffffff;
}
[data-theme=light] .bi-ticket-tab:hover:not(.active) {
  border-color: rgba(26, 107, 232, 0.35);
  color: var(--color-text);
}
[data-theme=light] .bi-chart-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .bi-chart-card:hover {
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .bi-search-input {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}
[data-theme=light] .bi-search-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
[data-theme=light] .bi-search-input:focus {
  border-color: rgba(26, 107, 232, 0.5);
  background: rgba(26, 107, 232, 0.02);
}
[data-theme=light] .bi-search-clear {
  color: rgba(0, 0, 0, 0.3);
}
[data-theme=light] .bi-search-clear:hover {
  color: var(--color-text);
}
[data-theme=light] .bi-suggestions {
  background: #ffffff;
  border-color: rgba(26, 107, 232, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(26, 107, 232, 0.05);
}
[data-theme=light] .bi-suggestions::-webkit-scrollbar-thumb {
  background: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .bi-suggestion-loading {
  color: rgba(0, 0, 0, 0.4);
}
[data-theme=light] .bi-suggest-spinner {
  border-color: rgba(26, 107, 232, 0.2);
  border-top-color: #1A6BE8;
}
[data-theme=light] .bi-suggestion-empty {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme=light] .bi-suggestion-item {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .bi-suggestion-item:hover {
  background: rgba(26, 107, 232, 0.05);
}
[data-theme=light] .bi-suggest-meta {
  color: rgba(0, 0, 0, 0.4);
}
[data-theme=light] .bi-admin-context {
  background: rgba(26, 107, 232, 0.05);
  border-color: rgba(26, 107, 232, 0.15);
}
[data-theme=light] .bi-admin-context-label {
  color: rgba(15, 25, 35, 0.65);
}
[data-theme=light] .bi-ritm-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
[data-theme=light] .bi-ritm-card:hover {
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .bi-progress-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .bi-progress-bar {
  background: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .bi-progress-fill {
  background:
    linear-gradient(
      90deg,
      #1A6BE8,
      #1250B0);
  box-shadow: 0 0 12px rgba(26, 107, 232, 0.35);
}
[data-theme=light] .bi-progress-row {
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .bi-progress-row-value--accent {
  color: #1A6BE8;
}
[data-theme=light] .bi-table-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .bi-table th {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .bi-table td {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .bi-table-total td {
  border-top-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .bi-badge--fgts {
  background: rgba(26, 107, 232, 0.12);
  color: #1A6BE8;
}
[data-theme=light] .bi-badge--clt {
  background: rgba(16, 160, 220, 0.12);
  color: #10a0dc;
}
[data-theme=light] .bi-upload-card {
  background: rgba(26, 107, 232, 0.04);
  border-color: rgba(26, 107, 232, 0.25);
}
[data-theme=light] .bi-upload-btn {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
  color: #ffffff;
}
[data-theme=light] .bi-upload-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}
[data-theme=light] .bi-upload-result--ok {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .bi-loading-spinner {
  border-color: rgba(26, 107, 232, 0.2);
  border-top-color: #1A6BE8;
}
[data-theme=light] .bi-suggest-spinner {
  border-color: rgba(26, 107, 232, 0.2);
  border-top-color: #1A6BE8;
}
[data-theme=light] .bi-delta-badge--up {
  background: rgba(26, 107, 232, 0.09);
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .bi-delta-badge--down {
  background: rgba(220, 40, 40, 0.07);
  color: #c02020;
  border-color: rgba(220, 40, 40, 0.18);
}
.bi-upload-accordion {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.01);
  overflow: hidden;
  transition: all 0.2s ease;
}
.bi-upload-accordion:hover {
  border-color: rgba(74, 255, 197, 0.18);
  box-shadow: 0 0 24px rgba(74, 255, 197, 0.04);
}
.bi-upload-accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  outline: none;
  color: var(--color-text);
  font-family: inherit;
  transition: background 0.2s;
}
.bi-upload-accordion-header:hover {
  background: rgba(255, 255, 255, 0.02);
}
.bi-upload-accordion-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.bi-upload-accordion-icon {
  font-size: 18px;
}
.bi-upload-accordion-chevron {
  font-size: 12px;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.bi-upload-accordion-chevron.expanded {
  transform: rotate(180deg);
}
.bi-upload-accordion-content {
  padding: 0 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-theme=light] .bi-upload-accordion {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.01);
}
[data-theme=light] .bi-upload-accordion:hover {
  border-color: rgba(26, 107, 232, 0.25);
  box-shadow: 0 4px 12px rgba(26, 107, 232, 0.04);
}
[data-theme=light] .bi-upload-accordion-header:hover {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .bi-upload-accordion-content {
  border-top-color: rgba(0, 0, 0, 0.04);
}
.bi-update-container {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
[data-theme=light] .bi-update-container {
  background: rgba(0, 0, 0, 0.005);
  border-color: rgba(0, 0, 0, 0.08);
}
.bi-update-container-title {
  font-size: 13px;
  font-weight: 700;
  color: #4AFFC5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
[data-theme=light] .bi-update-container-title {
  color: #1A6BE8;
}
.bi-update-sync-btn {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.3);
  border-radius: 10px;
  color: #4AFFC5;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: inherit;
}
.bi-update-sync-btn:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.2);
  border-color: #4AFFC5;
}
[data-theme=light] .bi-update-sync-btn {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.3);
  color: #1A6BE8;
}
[data-theme=light] .bi-update-sync-btn:hover:not(:disabled) {
  background: rgba(26, 107, 232, 0.15);
  border-color: #1A6BE8;
}
.bi-update-sync-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bi-update-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
}
[data-theme=light] .bi-update-divider {
  background: rgba(0, 0, 0, 0.05);
}
.bi-update-group-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.01);
}
[data-theme=light] .bi-update-group-box {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.01);
}
.bi-admin-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  animation: fadeIn 0.3s ease;
}
.bi-admin-stat-card {
  flex: 1;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s;
}
.bi-admin-stat-card:hover {
  border-color: rgba(74, 255, 197, 0.15);
}
[data-theme=light] .bi-admin-stat-card {
  background: rgba(0, 0, 0, 0.005);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .bi-admin-stat-card:hover {
  border-color: rgba(26, 107, 232, 0.15);
}
.bi-admin-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: #4AFFC5;
}
[data-theme=light] .bi-admin-stat-num {
  color: #1A6BE8;
}
.bi-admin-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* src/pages/Materials/Materials.css */
.materials-page {
  animation: fadeInUp 0.3s ease;
}
.materials-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}
.materials-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.materials-subtitle {
  font-size: 15px;
  color: var(--color-text-secondary);
}
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.materials-card {
  background:
    linear-gradient(
      145deg,
      rgba(74, 255, 197, 0.10) 0%,
      rgba(20, 60, 45, 0.18) 35%,
      rgba(10, 10, 14, 0.85) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(74, 255, 197, 0.18);
  border-radius: 18px;
  padding: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  font-family: var(--font-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(74, 255, 197, 0.08) inset;
}
.materials-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(74, 255, 197, 0.55) 50%,
      transparent 100%);
  opacity: 0.7;
  transition: opacity 0.3s;
}
.materials-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.10) 0%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: inherit;
}
.materials-card:hover {
  border-color: rgba(74, 255, 197, 0.50);
  transform: translateY(-5px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(74, 255, 197, 0.22),
    0 0 32px rgba(74, 255, 197, 0.08);
}
.materials-card:hover::before {
  opacity: 1;
}
.materials-card:hover::after {
  opacity: 1;
}
.materials-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(74, 255, 197, 0.25));
  position: relative;
  z-index: 1;
}
.materials-card-icon:empty {
  display: none;
}
.materials-card-body {
  flex: 1;
  position: relative;
  z-index: 1;
}
.materials-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.materials-card-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.materials-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(74, 255, 197, 0.12);
  position: relative;
  z-index: 1;
}
.materials-card-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(74, 255, 197, 0.75);
  font-family: var(--font-data);
  letter-spacing: 0.02em;
}
.materials-card-arrow {
  color: var(--color-accent);
  display: flex;
  align-items: center;
  transition: transform 0.25s, filter 0.25s;
}
.materials-card:hover .materials-card-arrow {
  transform: translateX(5px);
  filter: drop-shadow(0 0 6px rgba(74, 255, 197, 0.7));
}
[data-theme=light] .materials-card {
  background:
    linear-gradient(
      145deg,
      rgba(26, 107, 232, 0.08) 0%,
      rgba(255, 255, 255, 0.75) 40%,
      rgba(240, 247, 255, 0.92) 100%);
  border: 1px solid rgba(26, 107, 232, 0.18);
  box-shadow: 0 4px 24px rgba(26, 107, 232, 0.10), 0 1px 0 rgba(26, 107, 232, 0.06) inset;
}
[data-theme=light] .materials-card::before {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(26, 107, 232, 0.50) 50%,
      transparent 100%);
}
[data-theme=light] .materials-card::after {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.08) 0%,
      transparent 60%);
}
[data-theme=light] .materials-card:hover {
  border-color: rgba(26, 107, 232, 0.45);
  box-shadow:
    0 16px 48px rgba(26, 107, 232, 0.15),
    0 0 0 1px rgba(26, 107, 232, 0.20),
    0 0 32px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .materials-card-icon {
  filter: drop-shadow(0 2px 8px rgba(26, 107, 232, 0.20));
}
[data-theme=light] .materials-card-name {
  color: #0F1923;
}
[data-theme=light] .materials-card-desc {
  color: #5A6680;
}
[data-theme=light] .materials-card-footer {
  border-top-color: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .materials-card-count {
  color: rgba(26, 107, 232, 0.80);
}
[data-theme=light] .materials-card:hover .materials-card-arrow {
  transform: translateX(5px);
  filter: drop-shadow(0 0 6px rgba(26, 107, 232, 0.65));
}

/* src/components/ui/LoadingSkeleton/LoadingSkeleton.css */
.skeleton {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.skeleton-table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-table-row:last-child {
  border-bottom: none;
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.skeleton-grid-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-circle {
  border-radius: 50% !important;
}

/* src/components/ui/EmptyState/EmptyState.css */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  gap: 12px;
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 8px;
  filter: grayscale(0.3);
}
.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}
.empty-state-description {
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 340px;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* src/pages/Materials/MaterialsCategory.css */
.matcat-page {
  padding: 0 0 48px;
}
.matcat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.matcat-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.25);
  border-radius: 20px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px 7px 10px;
  transition: all 0.2s;
  font-family: inherit;
}
.matcat-back:hover {
  background: rgba(74, 255, 197, 0.12);
  border-color: var(--color-accent);
}
.matcat-sep {
  color: var(--color-border);
}
.matcat-current {
  color: var(--color-text);
  font-weight: 500;
}
.matcat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.matcat-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}
.matcat-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}
.matcat-count-badge {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--color-border);
}
.matcat-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.matcat-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.matcat-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}
.matcat-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.matcat-search:focus {
  outline: none;
  border-color: var(--color-accent);
}
.matcat-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.matcat-filter-select {
  display: none;
}
.matcat-filter-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.matcat-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.matcat-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}
.matcat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  text-align: center;
  color: var(--color-text-secondary);
}
.matcat-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.matcat-clear-btn {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.matcat-clear-btn:hover {
  background: var(--color-accent);
  color: #000;
}
.mat-grid {
  display: grid;
  gap: 20px;
}
.mat-grid-large {
  grid-template-columns: repeat(2, 1fr);
}
.mat-grid-medium {
  grid-template-columns: repeat(3, 1fr);
}
.mat-grid-small {
  grid-template-columns: repeat(4, 1fr);
}
.mat-grid-list {
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (max-width: 900px) {
  .mat-grid-large {
    grid-template-columns: repeat(2, 1fr);
  }
  .mat-grid-medium {
    grid-template-columns: repeat(2, 1fr);
  }
  .mat-grid-small {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .mat-grid-large {
    grid-template-columns: 1fr;
  }
  .mat-grid-medium {
    grid-template-columns: repeat(2, 1fr);
  }
  .mat-grid-small {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mat-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.2s;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  width: 100%;
}
.mat-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  border-color: var(--color-accent);
}
.mat-card:active {
  transform: translateY(-1px) scale(1.005);
}
.mat-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mat-card-thumb-bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  transition: opacity 0.3s;
}
.mat-card:hover .mat-card-thumb-bg {
  opacity: 0.28;
}
.mat-card-icon {
  font-size: 64px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
}
.mat-card:hover .mat-card-icon {
  transform: scale(1.12);
}
.mat-card-icon-fallback {
  position: absolute;
  z-index: 1;
  transition: opacity 0.4s ease;
}
.mat-card-pdf-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  overflow: hidden;
}
.mat-card-pdf-preview canvas[style*=block] ~ .mat-card-icon-fallback,
.mat-card:has(.mat-card-pdf-preview canvas[style*=block]) .mat-card-icon-fallback {
  opacity: 0;
  pointer-events: none;
}
.mat-card-new-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 10px 5px 8px;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(74, 255, 197, 0.5);
}
.mat-card-new-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  flex-shrink: 0;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}
.mat-card-type-tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  border: 1px solid currentColor;
  opacity: 0.85;
}
.mat-card-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  border-top: 1px solid var(--color-border);
}
.mat-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.mat-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mat-card-date {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.mat-card-size {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
  background: var(--color-surface-3, rgba(255,255,255,0.05));
  padding: 2px 7px;
  border-radius: 6px;
}
.mat-card-skeleton {
  border-radius: 16px;
  aspect-ratio: 1 / 1.28;
  background:
    linear-gradient(
      90deg,
      var(--color-surface-2) 25%,
      var(--color-border) 50%,
      var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s infinite;
}
@keyframes skeleton-shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: viewer-fade-in 0.2s ease;
}
@keyframes viewer-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.viewer-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: viewer-slide-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
@keyframes viewer-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
  flex-shrink: 0;
}
.viewer-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.viewer-file-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.viewer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}
.viewer-subtitle {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.viewer-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.viewer-close:hover {
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.4);
  color: #FF6B6B;
}
.viewer-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 400px;
  touch-action: pinch-zoom;
}
.viewer-loading,
.viewer-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  min-height: 400px;
  color: var(--color-text-secondary);
  font-size: 14px;
  padding: 40px;
  text-align: center;
}
.viewer-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.viewer-iframe {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  min-height: 70dvh;
  border: none;
  display: block;
  background: #fff;
}
.viewer-mobile-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  height: 100%;
  min-height: 60dvh;
  text-align: center;
}
.viewer-mobile-pdf-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  max-width: 280px;
  line-height: 1.4;
}
.viewer-mobile-pdf-hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 260px;
  line-height: 1.5;
}
.viewer-mobile-pdf-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin-top: 8px;
}
.viewer-mobile-pdf-actions button {
  width: 100%;
}
.viewer-image-wrap {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  touch-action: pan-x pan-y pinch-zoom;
}
.viewer-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: auto;
}
.viewer-video-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.viewer-video {
  width: 100%;
  max-width: 100%;
  max-height: 80vh;
  max-height: 80dvh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  display: block;
  background: #000;
}
.viewer-container {
  position: relative;
}
.viewer-close-float {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 18, 22, 0.72);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.viewer-close-float:hover {
  background: rgba(220, 50, 50, 0.7);
  border-color: rgba(255, 80, 80, 0.6);
  color: #fff;
  transform: scale(1.08);
}
@media (max-width: 768px) {
  .matcat-sep-desktop,
  .matcat-current-desktop {
    display: none;
  }
  .matcat-filters-desktop {
    display: none;
  }
  .matcat-filter-select {
    display: block;
    flex-shrink: 0;
    padding: 9px 12px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    min-width: 110px;
  }
  .matcat-filter-select:focus {
    outline: none;
    border-color: var(--color-accent);
  }
  .matcat-controls {
    flex-wrap: nowrap;
    align-items: center;
  }
  .matcat-search-wrap {
    min-width: 0;
  }
  .viewer-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .viewer-container {
    border-radius: 20px 20px 0 0;
    max-height: 96dvh;
    border-bottom: none;
  }
  .viewer-header {
    padding: 12px 14px;
  }
  .viewer-file-icon-desktop,
  .viewer-title-block {
    display: none;
  }
  .viewer-header-left {
    display: none;
  }
  .viewer-header {
    justify-content: flex-end;
    gap: 8px;
  }
  .viewer-close {
    width: 40px;
    height: 40px;
  }
  .viewer-iframe {
    min-height: 80dvh;
  }
  .viewer-image-wrap {
    min-height: 80dvh;
    padding: 10px;
    align-items: flex-start;
  }
  .viewer-video-wrap {
    min-height: 0;
    align-items: center;
  }
  .viewer-video {
    width: 100%;
    max-height: 60dvh;
  }
}
.matcat-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}
.matcat-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.matcat-view-btn:hover {
  background: rgba(74, 255, 197, 0.08);
  color: var(--color-text);
}
.matcat-view-btn.active {
  background: rgba(74, 255, 197, 0.15);
  color: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(74, 255, 197, 0.2);
}
[data-theme=light] .matcat-back {
  background: rgba(26, 107, 232, 0.06);
  border-color: rgba(26, 107, 232, 0.25);
}
[data-theme=light] .matcat-back:hover {
  background: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .mat-card-new-badge {
  box-shadow: 0 2px 12px rgba(26, 107, 232, 0.4);
  color: #ffffff;
}
[data-theme=light] .matcat-filter-btn.active {
  color: #ffffff;
}
[data-theme=light] .matcat-view-btn:hover {
  background: rgba(26, 107, 232, 0.07);
}
[data-theme=light] .matcat-view-btn.active {
  background: rgba(26, 107, 232, 0.12);
  box-shadow: 0 0 0 1px rgba(26, 107, 232, 0.22);
}
[data-theme=light] .mat-card-list:hover {
  box-shadow: 0 4px 20px rgba(26, 107, 232, 0.12);
}
[data-theme=light] .mat-card:hover {
  box-shadow: 0 12px 36px rgba(26, 107, 232, 0.14);
}
.mat-card-list {
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
}
.mat-card-list:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-color: var(--color-accent);
}
.mat-card-list-thumb {
  position: relative;
  width: 80px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mat-card-list-thumb .mat-card-thumb-bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
}
.mat-card-list-thumb .mat-card-icon-fallback {
  position: relative;
  z-index: 2;
  font-size: 24px;
}
.mat-card-list-thumb .mat-card-pdf-preview,
.mat-card-list-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
}
.mat-card-list-new {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--color-accent);
  color: #000;
  border-radius: 4px;
  padding: 2px 5px;
  z-index: 10;
}
.mat-card-list-info {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mat-card-list-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.mat-card-list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.mat-card-list-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.mat-card-list-arrow {
  padding: 0 16px;
  color: var(--color-border);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s;
}
.mat-card-list:hover .mat-card-list-arrow {
  color: var(--color-accent);
}
.mat-grid-small .mat-card-thumb {
  height: 120px;
}
.mat-grid-small .mat-card-title {
  font-size: 12px;
}
.mat-grid-small .mat-card-date,
.mat-grid-small .mat-card-size {
  font-size: 10px;
}
.mat-grid-large .mat-card-thumb {
  height: 220px;
}
.mat-grid-large .mat-card-title {
  font-size: 16px;
}

/* src/pages/Policies/Policies.css */
.policies-gate {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.policies-gate-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 48px 40px;
  animation: fadeInUp 0.35s ease;
}
.policies-gate-icon {
  font-size: 40px;
  margin-bottom: 16px;
}
.policies-gate-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}
.policies-gate-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
}
.policies-gate-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.policies-set-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  text-align: center;
  transition: color 0.2s;
}
.policies-set-link:hover {
  color: var(--color-accent);
}
.policies-page {
  animation: fadeInUp 0.3s ease;
  overflow-x: hidden;
}
.policies-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.policies-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.policies-subtitle {
  font-size: 15px;
  color: var(--color-text-secondary);
}
.policies-lock-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-family: var(--font-primary);
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.policies-lock-btn:hover {
  border-color: rgba(255, 77, 109, 0.3);
  color: var(--color-error);
}
.policies-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.policies-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--color-text-secondary);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: var(--transition);
}
.policies-filter-btn:hover,
.policies-filter-btn.active {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.3);
  color: var(--color-accent);
}
.policies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.policies-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--transition);
  animation: fadeInUp 0.3s ease;
}
.policies-card:hover {
  border-color: rgba(74, 255, 197, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
.policies-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.policies-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.policies-card-date {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data);
  white-space: nowrap;
}
.policies-card-table {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.policy-detail {
  animation: fadeInUp 0.3s ease;
  overflow-x: hidden;
}
.policy-detail-header {
  margin-bottom: 28px;
}
.policy-detail-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.policy-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.policy-detail-table,
.policy-detail-date {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.policy-detail-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 20px;
}
.policy-rich-content {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.75;
}
.policy-rich-content h1,
.policy-rich-content h2,
.policy-rich-content h3 {
  color: var(--color-text);
  margin: 20px 0 10px;
}
.policy-rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.policy-rich-content th,
.policy-rich-content td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}
.policy-rich-content th {
  background: rgba(74, 255, 197, 0.07);
  color: var(--color-accent);
  font-weight: 600;
}
.policy-bank-data {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px;
}
.policy-bank-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.policy-bank-content {
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  line-height: 1.6;
}
.policy-cards-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.policy-table-card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  background: #111d18;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(74, 255, 197, 0.25);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.policy-table-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(74, 255, 197, 0.25);
  background: #162a22;
  border-color: var(--color-accent);
}
.policy-card-column {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  flex: 1 1 0%;
}
.policy-card-column:nth-child(2) {
  flex: 2 1 0%;
}
.policy-card-column-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  opacity: 0.8;
}
.policy-card-column-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-primary);
}
@media (max-width: 768px) {
  .policy-detail-content {
    padding: 0;
    background: transparent;
    border: none;
    overflow-x: hidden;
  }
  .policy-detail-header {
    margin-bottom: 16px;
  }
  .policy-detail-title {
    font-size: 20px;
  }
  .policies-subtitle {
    font-size: 13px;
  }
  .policies-card {
    padding: 16px;
    gap: 8px;
  }
  .policies-card-title {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .policy-cards-container {
    gap: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .policy-table-card {
    display: none;
  }
  .policy-mobile-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(74, 255, 197, 0.2);
    border-radius: 14px;
    background: #0d1a14;
    box-shadow: inset -12px 0 16px -8px rgba(0, 0, 0, 0.4);
  }
  .policy-mobile-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 13px;
  }
  .policy-mobile-table thead tr {
    background: rgba(74, 255, 197, 0.07);
    border-bottom: 1px solid rgba(74, 255, 197, 0.15);
  }
  .policy-mobile-table th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    padding: 10px 14px;
    white-space: nowrap;
    text-align: left;
  }
  .policy-mobile-table th:first-child,
  .policy-mobile-table td:first-child {
    position: sticky;
    left: 0;
    background: #0d1a14;
    z-index: 2;
    border-right: 1px solid rgba(74, 255, 197, 0.12);
  }
  .policy-mobile-table thead th:first-child {
    background: rgba(74, 255, 197, 0.1);
  }
  .policy-mobile-table td {
    padding: 10px 14px;
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .policy-mobile-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
  }
  .policy-mobile-table tbody tr:nth-child(even) td:first-child {
    background: #0f1e17;
  }
  .policy-mobile-table tbody tr:last-child td {
    border-bottom: none;
  }
  .policy-scroll-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--color-text-secondary);
    padding: 6px 14px 10px;
    opacity: 0.7;
  }
}
@media (min-width: 769px) {
  .policy-mobile-table-wrapper,
  .policy-scroll-hint {
    display: none;
  }
}
[data-theme=light] .policies-gate-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(26, 107, 232, 0.20);
  box-shadow: 0 8px 40px rgba(26, 107, 232, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .policies-filter-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .policies-filter-btn:hover,
[data-theme=light] .policies-filter-btn.active {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.30);
  color: #1A6BE8;
}
[data-theme=light] .policies-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
[data-theme=light] .policies-card:hover {
  border-color: rgba(26, 107, 232, 0.25);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 20px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .policies-lock-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .policy-detail-content {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .policy-bank-data {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .policy-rich-content th {
  background: rgba(26, 107, 232, 0.07);
  color: #1A6BE8;
}
[data-theme=light] .policy-table-card {
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(26, 107, 232, 0.20);
  border-left: 4px solid #1A6BE8;
  box-shadow: 0 2px 16px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .policy-table-card:hover {
  background: rgba(240, 247, 255, 0.98);
  border-color: rgba(26, 107, 232, 0.35);
  box-shadow: 0 8px 30px rgba(26, 107, 232, 0.15);
}
[data-theme=light] .policy-card-column-label {
  color: #1A6BE8;
}
[data-theme=light] .policy-card-column-value {
  color: #0F1923;
}
@media (max-width: 768px) {
  [data-theme=light] .policy-mobile-table-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(26, 107, 232, 0.18);
    box-shadow: inset -12px 0 16px -8px rgba(26, 107, 232, 0.05);
  }
  [data-theme=light] .policy-mobile-table thead tr {
    background: rgba(26, 107, 232, 0.06);
    border-bottom-color: rgba(26, 107, 232, 0.15);
  }
  [data-theme=light] .policy-mobile-table th:first-child,
  [data-theme=light] .policy-mobile-table td:first-child {
    background: rgba(255, 255, 255, 0.97);
    border-right-color: rgba(26, 107, 232, 0.12);
  }
  [data-theme=light] .policy-mobile-table thead th:first-child {
    background: rgba(26, 107, 232, 0.08);
  }
  [data-theme=light] .policy-mobile-table td {
    color: #0F1923;
    border-bottom-color: rgba(0, 0, 0, 0.05);
  }
  [data-theme=light] .policy-mobile-table tbody tr:nth-child(even) td {
    background: rgba(26, 107, 232, 0.03);
  }
  [data-theme=light] .policy-mobile-table tbody tr:nth-child(even) td:first-child {
    background: rgba(240, 247, 255, 0.95);
  }
}
.modal-body:has(.policy-mobile-table-wrapper) {
  overflow-x: visible;
}
.policy-preview-admin .policy-mobile-table-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}
.policy-table-mobile-btn {
  display: none;
}
@media (max-width: 768px) {
  .policy-cards-container .policy-table-card {
    display: none;
  }
  .policy-table-mobile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: rgba(74, 255, 197, 0.06);
    border: 1px solid rgba(74, 255, 197, 0.2);
    border-radius: 14px;
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
  }
  .policy-table-mobile-btn:hover,
  .policy-table-mobile-btn:active {
    background: rgba(74, 255, 197, 0.12);
    border-color: rgba(74, 255, 197, 0.4);
    box-shadow: 0 0 12px rgba(74, 255, 197, 0.12);
  }
  .policy-table-mobile-btn-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    background: rgba(74, 255, 197, 0.12);
    color: var(--color-accent);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }
}
.ptf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  animation: ptf-fade-in 0.2s ease;
}
@keyframes ptf-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ptf-sheet {
  width: 100%;
  max-height: 92dvh;
  background: #131313;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  animation: ptf-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
@keyframes ptf-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.ptf-sheet::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}
.ptf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.ptf-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ptf-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptf-header-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.ptf-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.18s;
  flex-shrink: 0;
}
.ptf-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text);
}
.ptf-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ptf-row-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s;
}
.ptf-row-card--open {
  border-color: rgba(74, 255, 197, 0.2);
}
.ptf-row-index {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(74, 255, 197, 0.05);
  border-right: 1px solid rgba(74, 255, 197, 0.12);
  padding: 14px 8px;
  letter-spacing: 0.05em;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ptf-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: var(--font-primary);
}
.ptf-summary-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ptf-summary-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ptf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ptf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 4px 9px;
}
.ptf-chip--green {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.2);
}
.ptf-chip--blue {
  background: rgba(99, 179, 237, 0.1);
  border: 1px solid rgba(99, 179, 237, 0.2);
}
.ptf-chip--orange {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.ptf-chip-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ptf-chip--green .ptf-chip-label {
  color: var(--color-accent);
}
.ptf-chip--blue .ptf-chip-label {
  color: #63b3ed;
}
.ptf-chip--orange .ptf-chip-label {
  color: #fbbf24;
}
.ptf-chip-value {
  font-size: 13px;
  font-weight: 700;
}
.ptf-chip--green .ptf-chip-value {
  color: var(--color-accent);
}
.ptf-chip--blue .ptf-chip-value {
  color: #63b3ed;
}
.ptf-chip--orange .ptf-chip-value {
  color: #fbbf24;
}
.ptf-chevron {
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ptf-chevron--open {
  transform: rotate(180deg);
}
.ptf-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.ptf-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ptf-detail-row:last-child {
  border-bottom: none;
}
.ptf-detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  max-width: 45%;
}
.ptf-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  word-break: break-word;
}
.ptf-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0;
}
.ptf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ptf-field:last-child {
  border-right: none;
}
.ptf-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  opacity: 0.75;
}
.ptf-field-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-primary);
  word-break: break-word;
}
.ptf-empty {
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}
[data-theme=light] .ptf-sheet {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .ptf-sheet::before {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .ptf-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .ptf-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .ptf-close:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .ptf-row-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .ptf-row-index {
  background: rgba(26, 107, 232, 0.05);
  border-right-color: rgba(26, 107, 232, 0.12);
  color: #1A6BE8;
}
[data-theme=light] .ptf-summary-title {
  color: #0F1923;
}
[data-theme=light] .ptf-detail {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .ptf-detail-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .ptf-detail-value {
  color: #0F1923;
}
[data-theme=light] .ptf-chip--green {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .ptf-chip--green .ptf-chip-label,
[data-theme=light] .ptf-chip--green .ptf-chip-value {
  color: #1A6BE8;
}
[data-theme=light] .ptf-field {
  border-right-color: rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .ptf-field-label {
  color: #1A6BE8;
}
[data-theme=light] .ptf-field-value {
  color: #0F1923;
}
@media (max-width: 768px) {
  [data-theme=light] .policy-table-mobile-btn {
    background: rgba(26, 107, 232, 0.06);
    border-color: rgba(26, 107, 232, 0.2);
    color: #1A6BE8;
  }
  [data-theme=light] .policy-table-mobile-btn:hover {
    background: rgba(26, 107, 232, 0.12);
    border-color: rgba(26, 107, 232, 0.4);
  }
  [data-theme=light] .policy-table-mobile-btn-count {
    background: rgba(26, 107, 232, 0.10);
    color: #1A6BE8;
  }
}

/* src/pages/Policies/ResetPolicyPassword.css */
.reset-policy-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 20px;
}
.reset-policy-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 48px 40px;
  animation: fadeInUp 0.35s ease;
  text-align: left;
}
[data-theme=light] .reset-policy-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}
.reset-policy-icon {
  font-size: 40px;
  margin-bottom: 16px;
}
.reset-policy-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}
.reset-policy-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
}
.reset-policy-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rpp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.rpp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rpp-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 44px 11px 14px;
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}
.rpp-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.55;
}
.rpp-input:focus {
  border-color: rgba(74, 255, 197, 0.5);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.1);
  background: rgba(74, 255, 197, 0.03);
}
.rpp-input-error {
  border-color: rgba(255, 77, 109, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.1) !important;
}
[data-theme=light] .rpp-input {
  background: #f5f7fa;
  border: 1.5px solid #c8d0dd;
  color: #0F1923;
}
[data-theme=light] .rpp-input::placeholder {
  color: #8a98af;
  opacity: 1;
}
[data-theme=light] .rpp-input:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.14);
  background: #ffffff;
}
[data-theme=light] .rpp-input-error {
  border-color: #D93025 !important;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1) !important;
}
.rpp-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.rpp-eye:hover {
  color: var(--color-text);
}
.rpp-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.rpp-strength-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
[data-theme=light] .rpp-strength-bar {
  background: rgba(0, 0, 0, 0.1);
}
.rpp-strength-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.35s ease, background 0.35s ease;
}
.rpp-strength-label {
  font-size: 11px;
  font-weight: 700;
  min-width: 52px;
  text-align: right;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.rpp-criteria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
[data-theme=light] .rpp-criteria {
  background: #f5f7fa;
  border-color: #d1d9e4;
}
.rpp-criterion {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.rpp-criterion.valid {
  color: #4AFFC5;
  opacity: 1;
}
[data-theme=light] .rpp-criterion {
  color: #5A6680;
  opacity: 0.9;
}
[data-theme=light] .rpp-criterion.valid {
  color: #0D8050;
  opacity: 1;
}
.rpp-criterion-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.rpp-field-error {
  font-size: 12px;
  color: #FF4D6D;
  margin-top: 2px;
}
[data-theme=light] .rpp-field-error {
  color: #D93025;
}
.rpp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #FF4D6D;
}
[data-theme=light] .rpp-error {
  background: rgba(217, 48, 37, 0.08);
  border-color: rgba(217, 48, 37, 0.25);
  color: #D93025;
}
.rpp-btn-primary {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #4AFFC5 0%,
      #00bcd4 100%);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(74, 255, 197, 0.25);
  margin-top: 4px;
}
.rpp-btn-primary:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(74, 255, 197, 0.35);
}
.rpp-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
[data-theme=light] .rpp-btn-primary {
  background:
    linear-gradient(
      135deg,
      #1A6BE8 0%,
      #0052cc 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(26, 107, 232, 0.3);
}
[data-theme=light] .rpp-btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(26, 107, 232, 0.4);
}
.rpp-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000;
  border-radius: 50%;
  animation: rpp-spin 0.65s linear infinite;
  display: inline-block;
}
[data-theme=light] .rpp-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}
@keyframes rpp-spin {
  to {
    transform: rotate(360deg);
  }
}
.reset-policy-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  gap: 12px;
  animation: scaleIn 0.3s ease;
}
.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--color-success-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-border-accent);
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  box-shadow: var(--shadow-accent);
}
.reset-policy-success p {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.redirect-text {
  font-size: 13px !important;
  font-weight: normal !important;
  color: var(--color-text-secondary) !important;
  margin-top: 4px;
}

/* src/pages/Compliance/Compliance.css */
.compliance-page {
  padding: 1.5rem 2rem 3.5rem;
  max-width: 1400px;
  margin: 0 auto;
  color: var(--color-text);
  font-family: var(--font-primary, "Sora", sans-serif);
}
.desktop-only {
  display: flex !important;
}
div.desktop-only,
table.desktop-only {
  display: block !important;
}
.mobile-only {
  display: none !important;
}
@media (max-width: 860px) {
  .compliance-page {
    padding: 1rem 1rem 3rem;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: flex !important;
  }
  div.mobile-only,
  p.mobile-only {
    display: block !important;
  }
  span.mobile-only {
    display: inline !important;
  }
}
.compliance-lockdown-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.12) 0%,
      rgba(180, 83, 9, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid #f59e0b;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08);
  overflow: hidden;
}
.lockdown-banner-glow {
  position: absolute;
  top: -30px;
  left: 30px;
  width: 150px;
  height: 60px;
  background:
    radial-gradient(
      circle,
      rgba(245, 158, 11, 0.2) 0%,
      transparent 70%);
  pointer-events: none;
}
.lockdown-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.lockdown-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lockdown-banner-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lockdown-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
}
.lockdown-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
}
.lockdown-banner-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #cbd5e1;
}
@media (max-width: 640px) {
  .compliance-lockdown-banner {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }
}
.compliance-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.compliance-header-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.compliance-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.compliance-title-wrap {
  display: flex;
  flex-direction: column;
}
.compliance-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.compliance-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}
.reg-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-success-bg, rgba(74, 255, 197, 0.1));
  color: var(--color-success, #4AFFC5);
  border: 1px solid var(--color-border-accent, rgba(74, 255, 197, 0.3));
}
.reg-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.compliance-page-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
  line-height: 1.45;
  max-width: 680px;
}
.compliance-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-header-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn-header-action:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface-2);
}
.compliance-hero-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.hero-main-content {
  display: flex;
  flex-direction: column;
  flex: 1.3;
}
.hero-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.hero-identity-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.hero-seal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-success-bg, rgba(74, 255, 197, 0.1));
  border: 1px solid var(--color-border-accent, rgba(74, 255, 197, 0.25));
  color: var(--color-success, #4AFFC5);
  flex-shrink: 0;
}
.hero-title-group {
  display: flex;
  flex-direction: column;
}
.hero-tracker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-success-bg, rgba(74, 255, 197, 0.1));
  color: var(--color-success, #4AFFC5);
  border: 1px solid var(--color-border-accent, rgba(74, 255, 197, 0.3));
}
.hero-status-pill.warning {
  background: var(--color-warning-bg, rgba(255, 179, 71, 0.1));
  color: var(--color-warning, #f59e0b);
  border-color: rgba(245, 158, 11, 0.3);
}
.hero-status-headline {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}
.hero-status-description {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  margin: 0.75rem 0 0 0;
  line-height: 1.45;
  max-width: 540px;
}
.hero-gauge-mobile {
  display: none;
}
.hero-gauge-desktop {
  display: flex;
}
.hero-stats-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1.2;
  justify-content: flex-end;
}
.hero-stat-col {
  display: flex;
  flex-direction: column;
  min-width: 125px;
  border-left: 1px solid var(--color-border);
  padding-left: 1.25rem;
}
.hero-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}
.hero-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-accent, #4AFFC5);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.hero-stat-value.plain {
  color: var(--color-text);
}
.hero-stat-sub {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}
.hero-stat-sub.green {
  color: var(--color-success, #4AFFC5);
}
.hero-score-col {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-left: 1px solid var(--color-border);
  padding-left: 1.25rem;
}
.circular-gauge-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.circular-gauge-svg {
  transform: rotate(-90deg);
  width: 52px;
  height: 52px;
}
.circular-gauge-bg {
  stroke: var(--color-border);
}
.circular-gauge-bar {
  stroke: var(--color-accent);
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.circular-gauge-text {
  position: absolute;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-text);
}
.hero-score-meta {
  display: flex;
  flex-direction: column;
}
.hero-score-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.2rem;
}
.hero-score-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}
.compliance-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: none;
  padding-bottom: 0;
}
.compliance-tabs-group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.tab-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.25rem 0.85rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -1px;
}
.tab-nav-btn:hover {
  color: var(--color-text, #ffffff);
}
.tab-nav-btn.active {
  background: transparent;
  color: var(--color-accent, #00df8f);
  border-bottom: 2px solid var(--color-accent, #00df8f);
  font-weight: 700;
}
.tab-nav-btn.active svg {
  stroke: var(--color-accent, #00df8f);
}
@media (max-width: 860px) {
  .compliance-tabs-bar {
    background: #0e1117;
    padding: 5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
  }
  .compliance-tabs-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 6px;
  }
  .tab-nav-btn {
    justify-content: center;
    height: 44px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-secondary, #94a3b8);
    background: transparent;
    border: none;
    border-bottom: none !important;
    padding: 0 0.5rem;
    bottom: 0;
  }
  .tab-nav-btn.active {
    background: #171d26;
    color: var(--color-accent, #00df8f);
    border: 1px solid rgba(0, 223, 143, 0.25);
    font-weight: 700;
  }
  .tab-nav-btn.active svg {
    stroke: var(--color-accent, #00df8f);
  }
}
.tab-last-check {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.compliance-controls-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}
.compliance-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-input-icon {
  position: absolute;
  left: 1rem;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.compliance-search-input {
  width: 100%;
  padding: 0.7rem 3.5rem 0.7rem 2.6rem;
  border-radius: var(--radius-sm, 12px);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.88rem;
  transition: var(--transition);
}
.compliance-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.search-kbd-hint {
  position: absolute;
  right: 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  pointer-events: none;
}
.filter-row-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.chip-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.chip-status-btn:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}
.chip-status-btn.active {
  background: var(--color-accent, #4AFFC5);
  color: #000000;
  border-color: var(--color-accent);
  font-weight: 700;
}
[data-theme=light] .chip-status-btn.active {
  color: #ffffff;
}
.filter-row-categories {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-row-categories::-webkit-scrollbar {
  display: none;
}
.chip-category-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.chip-category-btn:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}
.chip-category-btn.active {
  background: var(--color-surface-2);
  border-color: var(--color-border-accent);
  color: var(--color-accent);
}
.compliance-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.35rem;
  margin-bottom: 2.5rem;
}
.compliance-term-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  box-shadow: var(--shadow-sm);
}
.compliance-term-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-accent);
}
.term-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.term-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-accent-glow);
  color: var(--color-accent, #4AFFC5);
  border: 1px solid var(--color-border-accent);
}
.term-version-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}
.term-version-badge.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
}
.term-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
}
.term-card-desc {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0 0 1.15rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.term-audit-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  margin-bottom: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.audit-box-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.audit-check-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-success-bg, rgba(74, 255, 197, 0.12));
  color: var(--color-success, #4AFFC5);
  border: 1px solid var(--color-border-accent);
  flex-shrink: 0;
}
.term-audit-box.outdated {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}
.audit-check-circle.pending {
  background: var(--color-warning-bg, rgba(255, 179, 71, 0.12));
  color: var(--color-warning, #f59e0b);
  border-color: rgba(245, 158, 11, 0.3);
}
.audit-check-circle.outdated {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
}
.audit-text-block {
  display: flex;
  flex-direction: column;
}
.audit-status-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-success, #4AFFC5);
  line-height: 1.2;
}
.audit-status-text.pending,
.audit-status-text.outdated {
  color: var(--color-warning, #f59e0b);
}
.audit-time-text {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  font-family: var(--font-data, "Roboto", monospace);
  margin-top: 2px;
}
.audit-reg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent, #4AFFC5);
  background: transparent;
  border: none;
  padding: 0;
  white-space: nowrap;
}
.term-card-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-card-view {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm, 10px);
  font-size: 0.86rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-accent, #4AFFC5);
  cursor: pointer;
  transition: var(--transition);
}
.btn-card-view:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-3);
}
.btn-card-view.highlight {
  background: var(--color-accent, #4AFFC5);
  color: #000000;
  border-color: var(--color-accent);
}
.btn-card-view.highlight-warning {
  background: #f59e0b;
  color: #000000;
  border-color: #f59e0b;
  font-weight: 800;
}
.btn-card-view.highlight-warning:hover {
  background: #d97706;
  border-color: #d97706;
}
[data-theme=light] .btn-card-view.highlight {
  color: #ffffff;
}
.btn-card-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-card-download:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}
.receipts-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}
.receipts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}
.receipts-table th {
  background: var(--color-surface-2);
  padding: 0.85rem 1.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.receipts-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.receipts-table tr:last-child td {
  border-bottom: none;
}
.receipts-table tr:hover td {
  background: var(--color-surface-2);
}
@media (max-width: 768px) {
  .compliance-page {
    padding: 1.25rem 1rem 2.5rem;
  }
  .compliance-top-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.25rem;
  }
  .compliance-header-actions {
    display: none;
  }
  .reg-badge-active {
    display: none;
  }
  .search-kbd-hint {
    display: none;
  }
  .compliance-search-input {
    padding-right: 1.25rem;
  }
  .compliance-hero-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
    gap: 1.15rem;
    border-radius: 16px;
  }
  .hero-main-content {
    width: 100%;
  }
  .hero-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
  }
  .hero-identity-group {
    gap: 0.85rem;
  }
  .hero-seal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .hero-gauge-mobile {
    display: flex;
    align-self: flex-start;
  }
  .hero-gauge-desktop {
    display: none;
  }
  .hero-status-headline {
    font-size: 1.08rem;
  }
  .hero-status-description {
    font-size: 0.82rem;
    margin: 0.85rem 0 0 0;
  }
  .hero-stats-row {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    border-top: none;
    padding-top: 0;
    gap: 2rem;
  }
  .hero-stat-col {
    border-left: none;
    padding-left: 0;
    min-width: unset;
    flex: 1;
  }
  .hero-score-col {
    display: none;
  }
  .compliance-tabs-bar {
    margin-bottom: 1rem;
  }
  .compliance-tabs-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .tab-nav-btn {
    justify-content: center;
    padding: 0.65rem 0.5rem;
    font-size: 0.84rem;
  }
  .tab-last-check {
    display: none;
  }
  .filter-row-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    width: 100%;
  }
  .chip-status-btn {
    width: 100%;
    justify-content: center;
    padding: 0.48rem 0.2rem;
    font-size: 0.76rem;
    gap: 0.3rem;
  }
  .compliance-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .compliance-term-card {
    padding: 1.25rem;
  }
  .term-card-title {
    font-size: 1.05rem;
  }
  .modal-backdrop:has(.compliance-reader-sheet) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-card.compliance-reader-sheet {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    max-height: 94vh !important;
    height: 94vh !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    animation: sheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .compliance-reader-sheet .sheet-fixed-header {
    padding: 0.85rem 1rem 0.65rem;
  }
  .compliance-reader-sheet .sheet-doc-title {
    font-size: 1.15rem;
  }
  .compliance-reader-sheet .sheet-scrollable-content {
    padding: 1rem 1rem 3rem !important;
  }
  .compliance-reader-sheet .sheet-bottom-bar {
    padding: 0.75rem 1rem 1.25rem;
  }
}
@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.modal-card.compliance-reader-sheet {
  background: var(--color-surface, #11161d);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
  max-width: 820px;
  width: 95%;
  max-height: 90vh;
  height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.compliance-reader-sheet .modal-body {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}
.sheet-inner-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}
.sheet-fixed-header {
  padding: 1rem 1.5rem 0.75rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sheet-drag-handle-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
}
.sheet-drag-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
[data-theme=light] .sheet-drag-handle {
  background: rgba(0, 0, 0, 0.18);
}
.sheet-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.sheet-header-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sheet-badge-accepted {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--color-success-bg, rgba(74, 255, 197, 0.12));
  color: var(--color-success, #4AFFC5);
  border: 1px solid var(--color-border-accent, rgba(74, 255, 197, 0.3));
}
.sheet-badge-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--color-warning-bg, rgba(255, 179, 71, 0.12));
  color: var(--color-warning, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.sheet-badge-outdated {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.sheet-outdated-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 0.9rem 1.15rem;
  margin-bottom: 1.15rem;
  animation: fadeIn 0.25s ease-in-out;
}
.sheet-outdated-alert-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.sheet-outdated-alert-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sheet-outdated-alert-body strong {
  font-size: 0.88rem;
  color: #fbbf24;
}
.sheet-outdated-alert-body p {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
}
.sheet-badge-version {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.sheet-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.sheet-close-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: var(--color-surface-3);
}
.sheet-doc-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.01em;
}
.sheet-doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.85rem;
}
.breadcrumb-brand {
  color: var(--color-text-secondary);
}
.breadcrumb-dot {
  opacity: 0.4;
  font-size: 0.65rem;
}
.breadcrumb-cat {
  color: var(--color-accent, #4AFFC5);
  font-weight: 600;
}
.sheet-sections-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sheet-sections-nav::-webkit-scrollbar {
  display: none;
}
.sheet-section-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.sheet-section-pill:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}
.sheet-section-pill.active {
  background: var(--color-success-bg, rgba(74, 255, 197, 0.1));
  border-color: var(--color-border-accent, rgba(74, 255, 197, 0.4));
  color: var(--color-accent, #4AFFC5);
  font-weight: 700;
}
[data-theme=light] .sheet-section-pill.active {
  background: rgba(26, 107, 232, 0.1);
  border-color: rgba(26, 107, 232, 0.4);
  color: #1A6BE8;
}
.sheet-scrollable-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.sheet-doc-card {
  background: #090e15;
  border: 1px solid #1c2635;
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
[data-theme=light] .sheet-doc-card {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}
.doc-section-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-margin-top: 15px;
}
.doc-section-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.doc-section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent, #4AFFC5);
  box-shadow: 0 0 6px var(--color-accent, #4AFFC5);
  flex-shrink: 0;
}
.doc-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}
.doc-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.doc-paragraph {
  font-size: 0.86rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}
.doc-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.doc-bullet-dot {
  color: var(--color-accent, #4AFFC5);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
}
.doc-bullet-content {
  flex: 1;
}
.doc-empty-line {
  height: 4px;
}
.doc-bold-text {
  color: var(--color-text);
  font-weight: 700;
}
.doc-legal-link {
  color: var(--color-accent, #4AFFC5);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.doc-legal-link:hover {
  opacity: 0.85;
}
.doc-alert-danger {
  color: #ff6b6b;
  font-weight: 700;
}
[data-theme=light] .doc-alert-danger {
  color: #dc2626;
}
[data-theme=light] .doc-legal-link {
  color: #1A6BE8;
}
.acceptance-receipt {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-accent, rgba(74, 255, 197, 0.35));
  border-radius: 14px;
  padding: 1.25rem 1.35rem 1.4rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 4px 20px var(--color-accent-glow, rgba(74, 255, 197, 0.1));
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  flex-shrink: 0;
}
.acceptance-receipt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--color-accent),
      transparent);
}
.receipt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.receipt-header-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.receipt-check-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--color-accent-glow);
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.receipt-title-text {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}
.receipt-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  background: var(--color-accent-glow);
  color: var(--color-accent);
  border: 1px solid var(--color-border-accent);
}
.receipt-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.receipt-date-text {
  font-size: 0.86rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}
.receipt-date-strong {
  color: var(--color-text);
  font-weight: 700;
}
.receipt-hash-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.receipt-hash-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.receipt-hash-label svg {
  color: var(--color-accent);
}
.hash-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
}
.hash-code-text {
  font-family:
    "JetBrains Mono",
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  word-break: break-all;
  line-height: 1.4;
}
.hash-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.hash-copy-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-glow);
  transform: translateY(-1px);
}
.receipt-footer-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
}
.receipt-footer-note svg {
  color: var(--color-accent);
  flex-shrink: 0;
}
[data-theme=light] .acceptance-receipt {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .receipt-hash-wrapper {
  background: var(--color-surface-2);
}
.sheet-scroll-bottom-spacer {
  height: 36px;
  flex-shrink: 0;
  width: 100%;
  display: block;
}
.sheet-acceptance-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.acceptance-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--color-text);
  line-height: 1.45;
  cursor: pointer;
}
.acceptance-checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent, #4AFFC5);
  flex-shrink: 0;
}
.acceptance-legal-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
}
.acceptance-legal-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
}
.sheet-bottom-bar {
  padding: 0.85rem 1.5rem 1rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.btn-sheet-secondary {
  flex: 0.85;
  height: 48px;
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-sheet-secondary:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.btn-sheet-primary-download {
  flex: 1.5;
  height: 48px;
  border-radius: 12px;
  background: #00c288;
  color: #000000;
  font-size: 0.94rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(0, 194, 136, 0.35);
}
.btn-sheet-primary-download:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-sheet-primary-accept {
  flex: 1.5;
  height: 48px;
  border-radius: 12px;
  background: var(--color-accent, #4AFFC5);
  color: #000000;
  font-size: 0.94rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(74, 255, 197, 0.3);
}
.btn-sheet-primary-accept:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-sheet-primary-accept:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[data-theme=light] .btn-sheet-primary-accept {
  background: #1A6BE8;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(26, 107, 232, 0.3);
}
.sheet-loading-container {
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.sheet-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.receipts-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--color-surface, #13151a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 1.25rem 1.65rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.25s ease-out;
}
@media (max-width: 860px) {
  .receipts-hero-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}
.receipts-hero-left {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.receipts-hero-check-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-accent, #4AFFC5);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(74, 255, 197, 0.35);
}
.receipts-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.receipts-hero-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text, #ffffff);
  margin: 0;
  letter-spacing: -0.01em;
}
.receipts-hero-desc {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #94a3b8);
  margin: 0;
  line-height: 1.4;
}
.receipts-hero-metrics {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .receipts-hero-metrics {
    width: 100%;
    justify-content: space-around;
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    padding-top: 1rem;
  }
}
.receipts-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 100px;
}
.receipts-metric-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text, #ffffff);
  font-family: var(--font-data, "Roboto", sans-serif);
}
.receipts-metric-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-secondary, #94a3b8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.receipts-metric-divider {
  width: 1px;
  height: 38px;
  background: var(--color-border, rgba(255, 255, 255, 0.1));
}
.receipts-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}
.receipts-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  background: var(--color-surface, #14161c);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0 0.85rem;
  height: 42px;
  color: var(--color-text-secondary, #94a3b8);
  transition: border-color 0.2s ease;
}
.receipts-search-box:focus-within {
  border-color: var(--color-accent, #4AFFC5);
}
.receipts-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text, #ffffff);
  font-size: 0.85rem;
  width: 100%;
  margin-left: 0.5rem;
}
.receipts-search-box input::placeholder {
  color: var(--color-text-secondary, #64748b);
}
.receipts-search-clear {
  background: none;
  border: none;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  padding: 2px 4px;
}
.receipts-sort-group {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface, #14161c);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 3px;
  height: 42px;
}
.receipts-sort-btn {
  padding: 0 0.85rem;
  height: 34px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.receipts-sort-btn.active {
  background: var(--color-surface-2, #252830);
  color: var(--color-text, #ffffff);
}
.receipts-btn-export-zip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 42px;
  padding: 0 1rem;
  border-radius: 10px;
  background: var(--color-surface, #14161c);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  color: var(--color-text, #cbd5e1);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.receipts-btn-export-zip:hover {
  background: var(--color-surface-2, #22252c);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
.receipts-btn-certificate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background: var(--color-accent, #4AFFC5);
  border: none;
  color: #000000;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(74, 255, 197, 0.25);
}
.receipts-btn-certificate:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.receipts-table-wrapper {
  background: var(--color-surface, #14161c);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 0.5rem 1.35rem 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow-x: auto;
}
.receipts-table-modern {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.receipts-table-modern thead th {
  padding: 1.1rem 0.75rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  white-space: nowrap;
}
.receipts-table-modern tbody tr {
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.05));
  transition: background 0.15s ease;
  cursor: pointer;
}
.receipts-table-modern tbody tr:last-child {
  border-bottom: none;
}
.receipts-table-modern tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.receipts-table-modern tbody td {
  padding: 1.15rem 0.75rem;
  vertical-align: middle;
}
.receipt-doc-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 260px;
}
.receipt-doc-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-surface-2, #1c1e24);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.receipt-doc-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.receipt-doc-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text, #f8fafc);
  line-height: 1.3;
}
.receipt-doc-subtitle {
  font-size: 0.76rem;
  color: var(--color-text-secondary, #64748b);
  line-height: 1.3;
}
.receipt-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-surface-2, #181a20);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 20px;
  padding: 0.32rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text, #cbd5e1);
  white-space: nowrap;
}
.receipt-cat-icon {
  display: flex;
  align-items: center;
  color: var(--color-accent, #4AFFC5);
}
.receipt-version-pill {
  display: inline-block;
  background: var(--color-surface-2, #1c1e24);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-data, monospace);
  color: var(--color-text-secondary, #94a3b8);
}
.receipt-date-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}
.receipt-date-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text, #f8fafc);
  white-space: nowrap;
}
.receipt-ip-text {
  font-size: 0.74rem;
  font-family: var(--font-data, monospace);
  color: var(--color-text-secondary, #64748b);
}
.receipt-hash-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #0c0e12;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}
.receipt-hash-code {
  font-family: var(--font-data, "Roboto", monospace);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent, #4AFFC5);
}
.receipt-hash-copy-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.receipt-hash-copy-btn:hover {
  color: var(--color-accent, #4AFFC5);
}
.receipt-status-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface-2, #181a20);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.status-dot-active {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #4AFFC5);
  box-shadow: 0 0 6px var(--color-accent, #4AFFC5);
}
.receipts-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0.5rem 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  margin-top: 0.5rem;
}
.receipts-footer-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--color-text-secondary, #64748b);
  line-height: 1.4;
}
.receipts-footer-right {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary, #64748b);
  white-space: nowrap;
}
.certificate-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.5rem;
}
.cert-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid var(--color-border-accent, rgba(74, 255, 197, 0.3));
  padding-bottom: 1rem;
}
.cert-logo-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(74, 255, 197, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cert-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text, #ffffff);
  margin: 0 0 2px 0;
  letter-spacing: -0.01em;
}
.cert-subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent, #4AFFC5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cert-body-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text, #cbd5e1);
  margin: 0;
}
.cert-partner-card {
  background: var(--color-surface-2, #181a20);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cert-partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
}
.cert-partner-row .lbl {
  color: var(--color-text-secondary, #64748b);
  font-weight: 600;
}
.cert-partner-row .val {
  color: var(--color-text, #ffffff);
  font-weight: 700;
}
.cert-partner-row .val-badge {
  background: rgba(74, 255, 197, 0.12);
  color: var(--color-accent, #4AFFC5);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  border: 1px solid rgba(74, 255, 197, 0.25);
}
.cert-terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.5rem;
}
.cert-terms-table th {
  text-align: left;
  padding: 0.65rem 0.5rem;
  color: var(--color-text-secondary, #64748b);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  text-transform: uppercase;
  font-size: 0.72rem;
}
.cert-terms-table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.05));
  color: var(--color-text, #cbd5e1);
}
.cert-seal-footer {
  background: var(--color-surface, #121316);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-top: 0.5rem;
}
.cert-seal-footer p {
  margin: 0 0 0.35rem 0;
  font-size: 0.78rem;
  color: var(--color-text-secondary, #64748b);
  line-height: 1.4;
}
.cert-auth-code {
  font-size: 0.72rem;
  font-family: var(--font-data, monospace);
  color: var(--color-accent, #4AFFC5);
}
.receipt-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 0.5rem 0.25rem;
}
.receipt-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  padding-bottom: 1rem;
}
.receipt-modal-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-surface-2, #181a20);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.receipt-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #ffffff);
  margin: 0 0 3px 0;
  line-height: 1.3;
}
.receipt-modal-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-secondary, #94a3b8);
}
.receipt-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  background: var(--color-surface-2, #181a20);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 1.1rem;
}
@media (max-width: 580px) {
  .receipt-modal-grid {
    grid-template-columns: 1fr;
  }
}
.receipt-modal-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.receipt-modal-field.full-width {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}
.receipt-modal-field .field-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #64748b);
}
.receipt-modal-field .field-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text, #f8fafc);
}
.receipt-modal-field .field-val.monospace {
  font-family: var(--font-data, monospace);
  color: var(--color-text, #f8fafc);
}
.receipt-modal-field .field-val-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent, #00df8f);
  letter-spacing: 0.04em;
}
.receipt-modal-hash-card {
  background: #0c0e12;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hash-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.hash-card-top .hash-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary, #64748b);
}
.hash-copy-btn-modal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  color: var(--color-text, #cbd5e1);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hash-copy-btn-modal:hover {
  background: var(--color-accent, #00df8f);
  color: #000000;
  border-color: var(--color-accent, #00df8f);
}
.hash-code-display {
  font-family: var(--font-data, "Roboto", monospace);
  font-size: 0.82rem;
  color: var(--color-accent, #00df8f);
  word-break: break-all;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.receipt-modal-legal {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.76rem;
  color: var(--color-text-secondary, #64748b);
  line-height: 1.45;
  background: var(--color-surface, #14161c);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.receipt-modal-legal svg {
  flex-shrink: 0;
  margin-top: 2px;
}
@media (max-width: 860px) {
  .receipts-hero-card {
    padding: 1.15rem 1rem !important;
    gap: 0.85rem !important;
  }
  .receipts-actions-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  .receipts-search-box {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
  }
  .receipts-btn-export-zip {
    flex-shrink: 0 !important;
    height: 40px !important;
    padding: 0 0.85rem !important;
    color: var(--color-accent, #00df8f) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
  }
}
.receipts-hero-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}
.receipts-hero-mobile-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
}
.receipts-hero-check-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent, #00df8f);
  margin-top: 2px;
}
.receipts-hero-mobile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.receipts-hero-headline-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.receipts-mobile-rate {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text, #ffffff);
}
.receipts-mobile-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text, #ffffff);
  margin: 0;
}
.receipts-badge-ativo {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 223, 143, 0.15);
  border: 1px solid rgba(0, 223, 143, 0.3);
  color: var(--color-accent, #00df8f);
  margin-left: 0.25rem;
}
.receipts-mobile-sub {
  font-size: 0.76rem;
  color: var(--color-text-secondary, #94a3b8);
  margin: 0;
}
.receipts-mobile-timestamp {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--color-accent, #00df8f);
  margin-top: 3px;
  font-weight: 500;
}
.receipts-hero-mobile-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  flex-shrink: 0;
}
.receipts-mobile-score {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text, #ffffff);
  font-family: var(--font-data, "Roboto", sans-serif);
}
.receipts-mobile-score-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary, #94a3b8);
  text-transform: uppercase;
}
.receipts-mobile-cards {
  display: none;
}
@media (max-width: 860px) {
  .receipts-mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.5rem;
  }
}
.receipt-mobile-card {
  background: var(--color-surface, #11141a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.receipt-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.receipt-card-badges-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.receipt-mobile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.25);
  color: var(--color-accent, #00df8f);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mobile-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #00df8f);
  box-shadow: 0 0 6px var(--color-accent, #00df8f);
}
.receipt-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text, #ffffff);
  line-height: 1.35;
  margin: 0;
}
.receipt-card-date-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--color-text-secondary, #94a3b8);
}
.receipt-card-date-row svg {
  color: var(--color-text-secondary, #64748b);
  flex-shrink: 0;
}
.receipt-card-sig-box {
  background: #080a0e;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.receipt-sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sig-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #64748b);
}
.sig-ip {
  font-size: 0.7rem;
  font-family: var(--font-data, monospace);
  color: var(--color-text-secondary, #64748b);
}
.receipt-sig-hash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sig-hash-code {
  font-family: var(--font-data, "Roboto", monospace);
  font-size: 0.78rem;
  color: var(--color-accent, #00df8f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.sig-copy-btn {
  background: none;
  border: none;
  padding: 2px;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.sig-copy-btn:hover {
  color: var(--color-accent, #00df8f);
}
.receipt-card-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.25rem;
}
.btn-card-action-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 40px;
  border-radius: 9px;
  background: var(--color-surface-2, #181b22);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  color: var(--color-text, #ffffff);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-card-action-view:hover {
  background: var(--color-surface-3, #222630);
  border-color: rgba(255, 255, 255, 0.15);
}
.btn-card-action-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 40px;
  border-radius: 9px;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.25);
  color: var(--color-accent, #00df8f);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-card-action-download:hover {
  background: rgba(0, 223, 143, 0.2);
  border-color: rgba(0, 223, 143, 0.4);
}
.receipts-mobile-audit-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--color-surface, #11141a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 1.1rem;
  margin-top: 0.75rem;
  margin-bottom: 2rem;
}
.mobile-audit-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent, #00df8f);
}
.mobile-audit-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-audit-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text, #ffffff);
  margin: 0;
}
.mobile-audit-desc {
  font-size: 0.76rem;
  color: var(--color-text-secondary, #94a3b8);
  line-height: 1.45;
  margin: 0;
}

/* src/pages/Compliance/components/ComplianceDocumentViewer.css */
.compliance-doc-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0b0e14;
  display: flex;
  flex-direction: column;
  color: #f8fafc;
  font-family: var(--font-primary, "Sora", sans-serif);
  overflow: hidden;
  animation: fadeInViewer 0.2s ease-out;
}
@keyframes fadeInViewer {
  from {
    opacity: 0;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.compliance-doc-viewer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.5rem;
  background: #11151d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 58px;
  flex-shrink: 0;
  gap: 1rem;
}
.viewer-topbar-left {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  min-width: 0;
}
.viewer-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.viewer-btn-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.viewer-valid-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.3);
  color: #00df8f;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.valid-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00df8f;
  box-shadow: 0 0 6px #00df8f;
}
.viewer-doc-filename {
  font-size: 0.8rem;
  color: #64748b;
  font-family: var(--font-data, "Roboto", monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer-topbar-center {
  display: flex;
  align-items: center;
  background: #181d26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px 8px;
  gap: 0.45rem;
}
.viewer-ctrl-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.viewer-ctrl-btn:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.viewer-ctrl-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.viewer-zoom-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f1f5f9;
  min-width: 44px;
  text-align: center;
  font-family: var(--font-data, monospace);
}
.viewer-page-counter {
  font-size: 0.78rem;
  color: #64748b;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 8px;
  white-space: nowrap;
}
.viewer-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.viewer-btn-print {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 1rem;
  border-radius: 8px;
  background: #1e2430;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.viewer-btn-print:hover {
  background: #28303f;
  border-color: rgba(255, 255, 255, 0.25);
}
.viewer-btn-download-signed {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 1.15rem;
  border-radius: 8px;
  background: #00df8f;
  border: none;
  color: #05140d;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 223, 143, 0.3);
  white-space: nowrap;
}
.viewer-btn-download-signed:hover:not(:disabled) {
  background: #00c77f;
  transform: translateY(-1px);
}
.viewer-btn-download-signed:disabled {
  opacity: 0.6;
  cursor: wait;
}
.compliance-doc-viewer-canvas {
  flex: 1;
  overflow: auto;
  background: #0d1117;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 1.5rem 4rem;
}
.compliance-print-sheet {
  width: 780px;
  max-width: 100%;
  min-height: 1060px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 4px;
  padding: 34px 40px 30px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: var(--font-primary, "Sora", "Segoe UI", sans-serif);
  position: relative;
  transition: transform 0.15s ease-out;
}
.sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 14px;
  margin-bottom: 14px;
  gap: 1rem;
}
.sheet-header-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.sheet-brand-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #0b0f17;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #1e293b;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sheet-brand-symbol-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sheet-brand-text {
  display: flex;
  flex-direction: column;
}
.sheet-brand-name {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b0f17;
  margin: 0;
  line-height: 1.1;
}
.sheet-brand-sub {
  font-size: 0.65rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.sheet-brand-system {
  font-size: 0.55rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 1px;
}
.sheet-header-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.sheet-legal-company {
  font-size: 0.62rem;
  font-weight: 800;
  color: #0f172a;
}
.sheet-legal-addr,
.sheet-legal-dpo {
  font-size: 0.56rem;
  color: #64748b;
}
.sheet-legal-protocol {
  font-size: 0.62rem;
  font-weight: 800;
  color: #059669;
  font-family: var(--font-data, monospace);
  margin-top: 2px;
}
.sheet-title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 3px solid #00df8f;
  padding-left: 12px;
  margin-bottom: 12px;
  gap: 1rem;
}
.sheet-title-accent-wrap {
  display: flex;
  flex-direction: column;
}
.sheet-pill-instrument {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #059669;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.sheet-main-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}
.sheet-main-desc {
  font-size: 0.72rem;
  color: #475569;
  margin: 2px 0 0 0;
}
.sheet-status-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: #ecfdf5;
  border: 1px solid #10b981;
  border-radius: 6px;
  flex-shrink: 0;
}
.sheet-status-text {
  display: flex;
  flex-direction: column;
}
.status-sub-lbl {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #059669;
  text-transform: uppercase;
}
.status-main-lbl {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #047857;
  text-transform: uppercase;
}
.sheet-evidence-section {
  margin-bottom: 12px;
}
.sheet-section-legend {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  display: block;
  margin-bottom: 5px;
}
.sheet-evidence-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 9px 12px;
}
.sheet-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px 12px;
}
.evidence-cell {
  display: flex;
  flex-direction: column;
}
.cell-lbl {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
.cell-val {
  font-size: 0.72rem;
  color: #0f172a;
}
.cell-val.bold {
  font-weight: 700;
}
.cell-val.monospace {
  font-family: var(--font-data, "Roboto", monospace);
}
.cell-tag {
  color: #64748b;
  font-size: 0.68rem;
}
.cell-muted {
  color: #64748b;
  font-size: 0.64rem;
}
.cell-tls {
  color: #059669;
  font-size: 0.65rem;
  font-weight: 700;
}
.sheet-clauses-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
}
.sheet-clause-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clause-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.clause-dot {
  color: #059669;
  font-size: 0.75rem;
}
.clause-text {
  font-size: 0.67rem;
  color: #334155;
  line-height: 1.45;
  margin: 0;
  text-align: justify;
}
.clause-text strong {
  color: #0f172a;
  font-weight: 700;
}
.clause-highlight {
  color: #059669;
  font-weight: 800;
}
.sheet-validation-box {
  background: #fafcff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.6fr;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  margin-bottom: 10px;
}
.val-col {
  display: flex;
  flex-direction: column;
}
.col-qr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}
.qr-icon-wrap,
.qr-code-canvas-box {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #cbd5e1;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.qr-code-canvas-box svg {
  width: 100%;
  height: 100%;
  display: block;
}
.val-qr-text {
  display: flex;
  flex-direction: column;
}
.val-title {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0f172a;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.val-desc {
  font-size: 0.54rem;
  color: #64748b;
  line-height: 1.35;
  margin: 0;
}
.val-hash-code {
  font-family: var(--font-data, "Roboto", monospace);
  font-size: 0.54rem;
  color: #0f172a;
  word-break: break-all;
  line-height: 1.25;
  background: #f1f5f9;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  margin: 2px 0;
}
.val-hash-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: #64748b;
  margin-top: 1px;
}
.cert-org {
  font-weight: 700;
  color: #0f172a;
}
.sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
  font-size: 0.56rem;
  color: #64748b;
}
.footer-left {
  font-weight: 500;
}
.footer-right {
  font-family: var(--font-data, monospace);
  font-weight: 600;
}
@media (max-width: 860px) {
  .compliance-doc-viewer-topbar {
    padding: 0.5rem 0.85rem;
    height: auto;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .viewer-topbar-center {
    display: none;
  }
  .viewer-valid-pill {
    display: none;
  }
  .compliance-doc-viewer-canvas {
    padding: 1rem 0.5rem 2rem;
  }
  .compliance-print-sheet {
    padding: 20px 16px;
    width: 100%;
    border-radius: 0;
    min-height: auto;
  }
  .sheet-evidence-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sheet-validation-box {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media print {
  body * {
    visibility: hidden !important;
  }
  .compliance-doc-viewer-overlay,
  .compliance-doc-viewer-overlay * {
    visibility: visible !important;
  }
  .compliance-doc-viewer-overlay {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 999999 !important;
  }
  .compliance-doc-viewer-topbar {
    display: none !important;
  }
  .compliance-doc-viewer-canvas {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  .compliance-print-sheet {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10mm 12mm !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    min-height: auto !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  @page {
    size: A4 portrait;
    margin: 0mm;
  }
}

/* src/pages/Compliance/ComplianceVerificationPage.css */
.compliance-verify-layout {
  min-height: 100vh;
  background-color: #07090e;
  background-image:
    radial-gradient(
      circle at 50% 0%,
      rgba(0, 223, 143, 0.08) 0%,
      transparent 60%),
    radial-gradient(
      circle at 100% 100%,
      rgba(14, 165, 233, 0.05) 0%,
      transparent 50%);
  color: #f1f5f9;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  display: flex;
  flex-direction: column;
}
.compliance-verify-nav {
  height: 68px;
  background: rgba(11, 15, 23, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}
.verify-nav-inner {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.verify-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}
.verify-logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid rgba(0, 223, 143, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-shadow: 0 0 15px rgba(0, 223, 143, 0.2);
}
.verify-brand-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.verify-nav-brand-text {
  display: flex;
  flex-direction: column;
}
.verify-nav-title {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
}
.verify-nav-sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #00df8f;
  text-transform: uppercase;
  margin-top: 1px;
}
.verify-nav-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.live-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 2s infinite ease-in-out;
}
.live-status-txt {
  font-size: 0.68rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.06em;
}
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}
.compliance-verify-container {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}
.verify-card-loading,
.verify-card-error {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 3.5rem 2rem;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.verify-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(0, 223, 143, 0.15);
  border-top-color: #00df8f;
  border-radius: 50%;
  margin: 0 auto 1.5rem auto;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-title,
.error-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
}
.loading-desc,
.error-desc {
  font-size: 0.9rem;
  color: #94a3b8;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5;
}
.error-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem auto;
}
.error-hash-box {
  margin: 1.5rem auto 0 auto;
  max-width: 600px;
  background: #090d14;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.error-hash-lbl {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
}
.error-hash-val {
  font-family:
    "JetBrains Mono",
    Consolas,
    monospace;
  font-size: 0.82rem;
  color: #f87171;
  word-break: break-all;
}
.error-actions {
  margin-top: 2rem;
}
.btn-return-home {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: #00df8f;
  color: #07090e;
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-return-home:hover {
  background: #00c77e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 223, 143, 0.35);
}
.verify-certificate-card {
  background: #0d121c;
  border: 1px solid rgba(0, 223, 143, 0.25);
  border-radius: 18px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 223, 143, 0.08);
  overflow: hidden;
  position: relative;
}
.verify-hero-badge {
  background:
    linear-gradient(
      135deg,
      rgba(6, 78, 59, 0.3) 0%,
      rgba(15, 23, 42, 0.6) 100%);
  border-bottom: 1px solid rgba(0, 223, 143, 0.15);
  padding: 2.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.shield-animated-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shield-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(0, 223, 143, 0.4);
  animation: rotate-ring 12s linear infinite;
}
@keyframes rotate-ring {
  to {
    transform: rotate(360deg);
  }
}
.shield-icon-center {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #064e3b;
  border: 2px solid #00df8f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 223, 143, 0.45);
}
.hero-text-block {
  display: flex;
  flex-direction: column;
}
.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.35);
  color: #00df8f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 0.5rem;
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00df8f;
}
.hero-main-title {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
}
.hero-sub-text {
  font-size: 0.88rem;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.45;
}
.verify-grid-section {
  padding: 1.75rem 2rem 1.25rem 2rem;
}
.section-block-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #94a3b8;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.verify-evidence-table {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}
.evidence-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
}
.evidence-row:last-child {
  border-bottom: none;
}
.ev-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
}
.ev-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #f1f5f9;
}
.ev-title-doc {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  color: #ffffff;
}
.ev-version-badge {
  background: #1e293b;
  border: 1px solid #334155;
  color: #38bdf8;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
}
.ev-protocol {
  font-family:
    "JetBrains Mono",
    Consolas,
    monospace;
  font-weight: 800;
  color: #00df8f;
  letter-spacing: 0.02em;
}
.ev-signatory-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.signatory-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #0284c7 0%,
      #0369a1 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.signatory-meta {
  display: flex;
  flex-direction: column;
}
.signatory-name {
  font-weight: 800;
  color: #ffffff;
  font-size: 0.88rem;
}
.signatory-role {
  font-size: 0.72rem;
  color: #38bdf8;
  font-weight: 600;
}
.ev-monospace {
  font-family:
    "JetBrains Mono",
    Consolas,
    monospace;
}
.ev-utc {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-left: 0.35rem;
}
.ev-tls-tag {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.5rem;
}
.bold-cyan {
  color: #38bdf8;
  font-weight: 800;
}
.verify-hash-box {
  margin: 0 2rem 1.5rem 2rem;
  background: #070a10;
  border: 1px dashed rgba(0, 223, 143, 0.35);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.hash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.hash-lbl {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #00df8f;
  text-transform: uppercase;
}
.btn-copy-hash {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s;
}
.btn-copy-hash:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.hash-display-code {
  font-family:
    "JetBrains Mono",
    Consolas,
    monospace;
  font-size: 0.84rem;
  color: #f1f5f9;
  letter-spacing: 0.04em;
  word-break: break-all;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.verify-legal-footer {
  margin: 0 2rem 1.75rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
}
.legal-basis-block {
  display: flex;
  flex-direction: column;
}
.legal-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}
.legal-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0;
}
.company-details-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.comp-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
}
.comp-cnpj {
  font-size: 0.75rem;
  color: #00df8f;
  font-weight: 700;
  margin: 0.15rem 0;
}
.comp-addr {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}
.verify-actions-bar {
  background: rgba(11, 15, 23, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-action-primary {
  background: #00df8f;
  color: #07090e;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.btn-action-primary:hover {
  background: #00c77e;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 223, 143, 0.3);
}
.btn-action-secondary {
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.7rem 1.3rem;
  border-radius: 8px;
  border: 1px solid #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.btn-action-secondary:hover {
  background: #334155;
  color: #ffffff;
}
.btn-action-link {
  margin-left: auto;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.btn-action-link:hover {
  color: #ffffff;
  text-decoration: underline;
}
.compliance-verify-footer {
  text-align: center;
  padding: 2rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.compliance-verify-footer p {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .compliance-verify-container {
    margin: 1.25rem auto;
    padding: 0 0.85rem;
  }
  .verify-hero-badge {
    flex-direction: column;
    text-align: center;
    padding: 1.75rem 1.25rem;
    gap: 1rem;
  }
  .hero-status-pill {
    margin: 0 auto 0.5rem auto;
  }
  .verify-grid-section {
    padding: 1.25rem 1rem 1rem 1rem;
  }
  .evidence-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
  }
  .verify-hash-box {
    margin: 0 1rem 1.25rem 1rem;
    padding: 1rem;
  }
  .verify-legal-footer {
    grid-template-columns: 1fr;
    margin: 0 1rem 1.25rem 1rem;
    gap: 1rem;
  }
  .verify-actions-bar {
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
  }
  .btn-action-link {
    margin-left: 0;
    text-align: center;
    margin-top: 0.5rem;
  }
}
@media print {
  body {
    background: #ffffff !important;
    color: #0b0f17 !important;
  }
  .compliance-verify-layout {
    background: #ffffff !important;
    color: #0b0f17 !important;
  }
  .compliance-verify-nav,
  .verify-actions-bar,
  .compliance-verify-footer,
  .btn-copy-hash {
    display: none !important;
  }
  .compliance-verify-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .verify-certificate-card {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .verify-hero-badge {
    background: #f8fafc !important;
    border-bottom: 2px solid #0b0f17 !important;
    padding: 1.5rem !important;
  }
  .hero-main-title {
    color: #0b0f17 !important;
  }
  .hero-sub-text {
    color: #334155 !important;
  }
  .verify-evidence-table {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
  }
  .evidence-row {
    border-bottom: 1px solid #e2e8f0 !important;
  }
  .ev-label {
    color: #475569 !important;
  }
  .ev-value {
    color: #0b0f17 !important;
  }
  .verify-hash-box {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
  }
  .hash-display-code {
    background: #ffffff !important;
    color: #0b0f17 !important;
    border: 1px solid #cbd5e1 !important;
  }
  .company-details-block {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
  }
  .comp-name {
    color: #0b0f17 !important;
  }
}

/* src/pages/AccountMatch/AccountMatch.css */
.reconciliation-page-container {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeIn 0.4s ease;
}
.reconciliation-header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
}
.reconciliation-title-box h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.reconciliation-title-box p {
  color: var(--color-text-secondary);
  font-size: 14px;
}
.reconciliation-control-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.control-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.control-input-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}
.control-date-input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--color-text);
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  width: 140px;
  transition: border-color 0.2s;
}
.control-date-input:focus {
  border-color: var(--color-accent);
}
.run-reconciliation-btn {
  background: var(--color-accent);
  color: #0b0f19;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  align-self: flex-end;
  height: 38px;
}
.run-reconciliation-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.run-reconciliation-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.reconciliation-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
}
.kpi-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
}
.kpi-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
}
.kpi-card-subtext {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 6px;
  display: block;
}
.kpi-card.alert {
  border-left: 4px solid #ef4444;
}
.kpi-card.success {
  border-left: 4px solid var(--color-accent);
}
.reconciliation-tabs-nav {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 6px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.tab-btn:hover {
  color: var(--color-text);
}
.tab-btn.active {
  color: var(--color-accent);
}
.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}
.tab-content-wrapper {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
}
.reconciliation-table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}
.reconciliation-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
.reconciliation-table th {
  padding: 14px 16px;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reconciliation-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  color: var(--color-text);
}
.reconciliation-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.01);
}
.badge-type {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}
.badge-type.error-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.badge-type.warning-badge {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.badge-type.success-badge {
  background: rgba(45, 212, 160, 0.1);
  color: #2dd4a0;
  border: 1px solid rgba(45, 212, 160, 0.2);
}
.resolve-issue-btn {
  background: rgba(45, 212, 160, 0.1);
  color: #2dd4a0;
  border: 1px solid rgba(45, 212, 160, 0.2);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.resolve-issue-btn:hover:not(:disabled) {
  background: var(--color-accent);
  color: #0b0f19;
}
.resolve-issue-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 15px;
}
.pagination-info-text {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pagination-buttons-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.table-empty-message {
  text-align: center;
  padding: 48px 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.table-empty-message span {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}
.reconciliation-loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--color-text-secondary);
  gap: 16px;
}
.spinner-icon {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* src/pages/Admin/AdminLayout.css */
.admin-layout {
  animation: fadeInUp 0.3s ease;
}
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar {
  display: none;
}
.admin-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}
.admin-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}
.admin-tab.active {
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
  border: 1px solid rgba(74, 255, 197, 0.2);
}
.admin-tab-icon {
  font-size: 16px;
}
.admin-tab-badge {
  background: #FF4D6D;
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
  line-height: 1.6;
  animation: at-pulse 2s ease-in-out infinite;
}
@keyframes at-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.admin-content {
  animation: fadeIn 0.2s ease;
}
[data-theme=light] .admin-tabs {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .admin-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
}
[data-theme=light] .admin-tab.active {
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.25);
  color: #1A6BE8;
}

/* src/pages/Admin/AdminUsers.css */
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.admin-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.admin-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.admin-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.admin-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}
.admin-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--color-text);
  padding: 10px 14px 10px 36px;
  font-size: 14px;
  font-family: var(--font-primary);
  outline: none;
  transition: border-color 0.2s;
}
.admin-search::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.admin-search:focus {
  border-color: rgba(74, 255, 197, 0.4);
}
.admin-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--color-text);
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-primary);
  outline: none;
  cursor: pointer;
}
.admin-select option {
  background-color: #1a1a1a;
  color: #ffffff;
}
.admin-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  vertical-align: middle;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-user-avatar {
  width: 32px;
  height: 32px;
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.15),
      rgba(45, 212, 160, 0.15));
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}
.admin-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.admin-user-email {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.admin-cell-mono {
  font-family: var(--font-data);
  font-size: 13px;
}
.admin-cell-secondary {
  color: var(--color-text-secondary) !important;
}
.admin-actions {
  display: flex;
  gap: 6px;
}
.admin-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.admin-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.admin-page-info {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.user-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(74, 255, 197, 0.15);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 520px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-cep-group {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.form-cep-group .input-wrapper {
  flex: 1;
}
.input-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.input-label-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
[data-theme=light] .admin-search {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .admin-search::placeholder {
  color: rgba(0, 0, 0, 0.30);
}
[data-theme=light] .admin-search:focus {
  border-color: rgba(26, 107, 232, 0.50);
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .admin-select {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}
[data-theme=light] .admin-select option {
  background-color: #ffffff;
  color: #0F1923;
}
[data-theme=light] .admin-table-wrap {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .admin-table th {
  background: rgba(26, 107, 232, 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .admin-table td {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .admin-table tr:hover td {
  background: rgba(26, 107, 232, 0.03);
}
[data-theme=light] .admin-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .admin-user-avatar {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.14),
      rgba(18, 80, 176, 0.10));
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .admin-table td {
  color: var(--color-text);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .form-section-title {
  border-bottom-color: rgba(26, 107, 232, 0.18);
}
.au-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.au-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.au-card--open {
  border-color: rgba(74, 255, 197, 0.25);
  box-shadow: 0 0 0 1px rgba(74, 255, 197, 0.08);
}
.au-card-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.au-card-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.15),
      rgba(45, 212, 160, 0.12));
  border: 1px solid rgba(74, 255, 197, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent);
}
.au-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.au-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.au-card-login {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-data);
}
.au-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.au-card-chevron {
  color: var(--color-text-secondary);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.au-card-chevron--open {
  transform: rotate(180deg);
}
.au-card-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  animation: fadeInDown 0.18s ease both;
}
.au-card-section {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.au-card-row-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 12px;
}
.au-card-row-detail:last-child {
  border-bottom: none;
}
.au-card-dl {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.au-card-dv {
  font-size: 13px;
  color: var(--color-text);
  text-align: right;
  word-break: break-word;
}
.au-card-dv--mono {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.au-card-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
}
.au-card-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.1s;
  white-space: nowrap;
}
.au-card-action-btn:active {
  transform: scale(0.97);
}
.au-card-action-btn--edit {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.2);
  color: var(--color-accent);
}
.au-card-action-btn--edit:hover {
  background: rgba(74, 255, 197, 0.14);
  border-color: rgba(74, 255, 197, 0.35);
}
.au-card-action-btn--block {
  background: rgba(255, 77, 109, 0.08);
  border-color: rgba(255, 77, 109, 0.2);
  color: var(--color-error);
}
.au-card-action-btn--block:hover {
  background: rgba(255, 77, 109, 0.14);
}
.au-card-action-btn--unblock {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.au-card-action-btn--unblock:hover {
  background: rgba(34, 197, 94, 0.14);
}
.au-card-action-btn--reset {
  background: rgba(255, 179, 71, 0.08);
  border-color: rgba(255, 179, 71, 0.2);
  color: var(--color-warning);
}
.au-card-action-btn--reset:hover {
  background: rgba(255, 179, 71, 0.14);
}
[data-theme=light] .au-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .au-card--open {
  border-color: rgba(26, 107, 232, 0.3);
  box-shadow: 0 0 0 1px rgba(26, 107, 232, 0.06);
}
[data-theme=light] .au-card-avatar {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.12),
      rgba(18, 80, 176, 0.08));
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .au-card-detail {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .au-card-row-detail {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .au-card-actions {
  background: rgba(0, 0, 0, 0.03);
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .au-card-action-btn--edit {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
  color: var(--color-accent);
}
.admin-sub-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}
.admin-sub-tab {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: var(--transition);
}
.admin-sub-tab:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
}
.admin-sub-tab.active {
  color: var(--color-accent);
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.2);
}

/* src/pages/Admin/AdminSmartOpportunities.css */
.smart-opp-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeInUp 0.3s ease;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.smart-opp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.smart-opp-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px 0;
}
.smart-opp-card {
  background: var(--color-card-bg, #0d0d11);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.smart-opp-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 20px;
}
.smart-opp-upload-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
}
@media (max-width: 992px) {
  .smart-opp-upload-grid {
    grid-template-columns: 1fr;
  }
}
.smart-opp-upload-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.smart-opp-textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  transition: var(--transition);
}
.smart-opp-textarea:focus {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}
.smart-opp-upload-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.smart-opp-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
}
.smart-opp-dropzone input {
  display: none;
}
.smart-opp-dropzone-label {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  width: 100%;
  height: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.01);
  transition: var(--transition);
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
.smart-opp-dropzone-label:hover {
  border-color: var(--color-accent);
  background: rgba(74, 255, 197, 0.02);
}
.dropzone-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.dropzone-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.dropzone-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.smart-opp-btn {
  background: none;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.smart-opp-btn--primary {
  background:
    linear-gradient(
      135deg,
      #4AFFC5 0%,
      #00B89F 100%);
  color: #000;
}
.smart-opp-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 255, 197, 0.25);
}
.smart-opp-btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.smart-opp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}
.smart-opp-btn--sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}
.smart-opp-btn--accent {
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
  border: 1px solid rgba(74, 255, 197, 0.2);
}
.smart-opp-btn--accent:hover {
  background: rgba(74, 255, 197, 0.2);
  transform: translateY(-1px);
}
.smart-opp-btn--ghost-icon {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
}
.smart-opp-btn--ghost-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}
.smart-opp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.smart-opp-alert {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.smart-opp-alert--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.smart-opp-alert--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.smart-opp-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.smart-opp-table-filters {
  display: flex;
  gap: 12px;
}
.smart-opp-search-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--color-text);
  font-size: 14px;
  min-width: 240px;
}
.smart-opp-search-input:focus {
  border-color: var(--color-accent);
  outline: none;
}
.smart-opp-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.smart-opp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
.smart-opp-table th {
  background: rgba(255, 255, 255, 0.02);
  padding: 14px 18px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.smart-opp-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.smart-opp-table tr:hover td {
  background: rgba(255, 255, 255, 0.01);
}
.smart-opp-name {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.smart-opp-cpf {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.smart-opp-phone {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}
.smart-opp-email {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.smart-opp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.smart-opp-badge--gray {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}
.smart-opp-badge--yellow {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}
.smart-opp-badge--green {
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
}
.smart-opp-badge--green-light {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}
.smart-opp-badge--orange {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}
.smart-opp-badge--red {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.smart-opp-badge--blue {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.opp-dot-spinner {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1s infinite alternate;
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}
.smart-opp-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.smart-opp-link-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.smart-opp-time {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.smart-opp-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.smart-opp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}
.smart-opp-modal {
  background: #0d0d12;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.smart-opp-modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.smart-opp-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--color-text);
}
.smart-opp-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-secondary);
}
.smart-opp-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.smart-opp-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.smart-opp-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.smart-opp-select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--color-text);
  font-size: 14px;
}
.smart-opp-simulation-preview {
  background: rgba(74, 255, 197, 0.03);
  border: 1px solid rgba(74, 255, 197, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.preview-row span {
  color: var(--color-text-secondary);
}
.preview-row strong.preview-val {
  color: var(--color-accent);
  font-size: 16px;
}
.smart-opp-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.smart-opp-activation-success {
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.success-title {
  color: #22c55e;
  font-weight: 600;
  font-size: 14px;
}
.success-copy-box {
  display: flex;
  gap: 10px;
}
.success-link-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: 13px;
}
.success-expire {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.smart-opp-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
  display: inline-block;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.smart-opp-status-filter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--color-text);
  font-size: 14px;
  min-width: 180px;
  cursor: pointer;
  transition: var(--transition);
}
.smart-opp-status-filter:focus {
  border-color: var(--color-accent);
  outline: none;
}
.smart-opp-status-filter option {
  background: #0d0d12;
  color: var(--color-text);
}
[data-theme=light] .smart-opp-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
[data-theme=light] .smart-opp-card-title {
  color: #0f172a;
}
[data-theme=light] .smart-opp-textarea {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .smart-opp-textarea:focus {
  background: #ffffff;
  border-color: #10b981;
}
[data-theme=light] .smart-opp-dropzone-label {
  background: #f8fafc;
  border-color: #cbd5e1;
}
[data-theme=light] .smart-opp-dropzone-label:hover {
  background: #f1f5f9;
  border-color: #10b981;
}
[data-theme=light] .dropzone-text {
  color: #0f172a;
}
[data-theme=light] .dropzone-sub {
  color: #64748b;
}
[data-theme=light] .smart-opp-btn--ghost {
  border-color: #cbd5e1;
  color: #334155;
  background: #ffffff;
}
[data-theme=light] .smart-opp-btn--ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme=light] .smart-opp-btn--primary {
  background:
    linear-gradient(
      135deg,
      #10b981 0%,
      #059669 100%);
  color: #ffffff;
}
[data-theme=light] .smart-opp-search-input,
[data-theme=light] .smart-opp-status-filter {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .smart-opp-status-filter option {
  background: #ffffff;
  color: #0f172a;
}
[data-theme=light] .smart-opp-table-wrapper {
  border-color: #e2e8f0;
}
[data-theme=light] .smart-opp-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .smart-opp-table td {
  border-bottom-color: #f1f5f9;
  color: #0f172a;
}
[data-theme=light] .smart-opp-table tr:hover td {
  background: #f8fafc;
}
[data-theme=light] .smart-opp-name {
  color: #0f172a;
}
[data-theme=light] .smart-opp-cpf {
  color: #64748b;
}
[data-theme=light] .smart-opp-phone {
  color: #0f172a;
}
[data-theme=light] .smart-opp-email {
  color: #64748b;
}
[data-theme=light] .smart-opp-badge--gray {
  background: #f1f5f9;
  color: #475569;
}
[data-theme=light] .smart-opp-badge--yellow {
  background: #fef9c3;
  color: #854d0e;
}
[data-theme=light] .smart-opp-badge--green {
  background: #dcfce7;
  color: #15803d;
}
[data-theme=light] .smart-opp-badge--green-light {
  background: #dcfce7;
  color: #166534;
}
[data-theme=light] .smart-opp-badge--orange {
  background: #ffedd5;
  color: #c2410c;
}
[data-theme=light] .smart-opp-badge--red {
  background: #fee2e2;
  color: #b91c1c;
}
[data-theme=light] .smart-opp-badge--blue {
  background: #dbeafe;
  color: #1d4ed8;
}
[data-theme=light] .smart-opp-btn--accent {
  background: #10b981;
  color: #ffffff;
  border: none;
}
[data-theme=light] .smart-opp-btn--accent:hover {
  background: #059669;
}
[data-theme=light] .smart-opp-btn--ghost-icon {
  border-color: #cbd5e1;
  color: #334155;
  background: #ffffff;
}
[data-theme=light] .smart-opp-btn--ghost-icon:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme=light] .smart-opp-modal {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme=light] .smart-opp-modal-header {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .smart-opp-modal-header h3 {
  color: #0f172a;
}
[data-theme=light] .smart-opp-modal-close {
  color: #64748b;
}
[data-theme=light] .smart-opp-modal-footer {
  border-top-color: #e2e8f0;
}
[data-theme=light] .smart-opp-form-group label {
  color: #475569;
}
[data-theme=light] .smart-opp-select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .smart-opp-select option {
  background: #ffffff;
  color: #0f172a;
}
[data-theme=light] .smart-opp-simulation-preview {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
[data-theme=light] .preview-row span {
  color: #475569;
}
[data-theme=light] .preview-row strong {
  color: #0f172a;
}
[data-theme=light] .preview-row strong.preview-val {
  color: #059669;
}
[data-theme=light] .smart-opp-activation-success {
  background: #f0fdf4;
  border-color: #86efac;
}
[data-theme=light] .success-title {
  color: #166534;
}
[data-theme=light] .success-copy-box .success-link-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .success-expire {
  color: #64748b;
}
.smart-opp-btn--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.smart-opp-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}
[data-theme=light] .smart-opp-btn--danger {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
}
[data-theme=light] .smart-opp-btn--danger:hover:not(:disabled) {
  background: #fecaca;
}

/* src/pages/Admin/AdminGroups.css */
.admin-groups {
}
.groups-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}
.groups-tab {
  padding: 9px 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: var(--transition);
}
.groups-tab:hover {
  color: var(--color-text);
}
.groups-tab.active {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.3);
  color: var(--color-accent);
}
.groups-loading {
  color: var(--color-text-secondary);
  padding: 32px;
  text-align: center;
}
.groups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.group-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition);
}
.group-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.group-card-body {
  flex: 1;
  min-width: 0;
}
.group-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.group-card-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.group-card-count {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data);
}
.group-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.perm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.perm-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid;
}
.perm-chip.enabled {
  color: var(--color-accent);
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.2);
}
.perm-chip.disabled {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.perm-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  gap: 16px;
}
.perm-toggle:last-child {
  border-bottom: none;
}
.perm-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.perm-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.perm-toggle-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.perm-switch {
  width: 42px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.perm-switch.on {
  background: var(--color-accent);
}
.perm-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.perm-switch.on .perm-switch-knob {
  transform: translateX(18px);
}
.modal-inner-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-inner-tab {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.18s;
}
.modal-inner-tab:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.16);
}
.modal-inner-tab.active {
  background: rgba(74, 255, 197, 0.12);
  border-color: rgba(74, 255, 197, 0.35);
  color: var(--color-accent);
  font-weight: 600;
}
.access-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}
.access-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.access-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s;
}
.access-check-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}
.access-check-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.access-check-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.access-check-name {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  flex: 1;
}
.access-loading {
  color: var(--color-text-secondary);
  font-size: 14px;
  padding: 20px 0;
  text-align: center;
}
.access-empty {
  color: var(--color-text-secondary);
  font-size: 13px;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}
.access-new-group-hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  background: rgba(74, 255, 197, 0.05);
  border: 1px solid rgba(74, 255, 197, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.5;
}
.members-transfer-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  height: 520px;
  min-height: 0;
  margin-top: -10px;
}
.members-column {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.members-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.members-column-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.members-column-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-data);
}
.members-column-count.inactive {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
}
.members-column-search {
  margin-bottom: 12px;
}
.members-column-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.members-column-list::-webkit-scrollbar {
  width: 6px;
}
.members-column-list::-webkit-scrollbar-track {
  background: transparent;
}
.members-column-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.members-column-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}
.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.member-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.member-avatar {
  width: 36px;
  height: 36px;
  background: rgba(74, 255, 197, 0.08);
  border: 1px solid rgba(74, 255, 197, 0.15);
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.member-dot {
  font-size: 8px;
  opacity: 0.5;
}
.member-action {
  flex-shrink: 0;
}
.member-bulk-btn {
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.15);
  color: var(--color-accent);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.member-bulk-btn:hover {
  background: rgba(74, 255, 197, 0.14);
  border-color: rgba(74, 255, 197, 0.35);
  box-shadow: 0 0 8px rgba(74, 255, 197, 0.15);
}
.member-bulk-remove-btn {
  background: rgba(255, 77, 109, 0.06);
  border: 1px solid rgba(255, 77, 109, 0.15);
  color: #ff4d6d;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.member-bulk-remove-btn:hover {
  background: rgba(255, 77, 109, 0.14);
  border-color: rgba(255, 77, 109, 0.35);
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.15);
}
.member-add-btn {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.member-add-btn:hover {
  background: var(--color-accent);
  color: black;
  border-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(74, 255, 197, 0.25);
}
.member-remove-btn {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.2);
  color: #ff4d6d;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.member-remove-btn:hover {
  background: #ff4d6d;
  color: white;
  border-color: #ff4d6d;
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.25);
}
.members-column-loading,
.members-column-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
  padding: 20px;
}
.members-column-empty-icon {
  font-size: 24px;
  margin-bottom: 6px;
  opacity: 0.6;
}
[data-theme=light] .groups-tab {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .groups-tab.active {
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.28);
  color: #1A6BE8;
}
[data-theme=light] .group-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .group-card:hover {
  border-color: rgba(26, 107, 232, 0.22);
  box-shadow: 0 4px 18px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .perm-chip.enabled {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.20);
}
[data-theme=light] .perm-chip.disabled {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .perm-switch {
  background: rgba(0, 0, 0, 0.14);
}
[data-theme=light] .perm-switch.on {
  background: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.18);
}
[data-theme=light] .perm-toggle {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .modal-inner-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .modal-inner-tab {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .modal-inner-tab:hover {
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme=light] .modal-inner-tab.active {
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.30);
  color: #1A6BE8;
}
[data-theme=light] .access-new-group-hint {
  background: rgba(26, 107, 232, 0.05);
  border-color: rgba(26, 107, 232, 0.15);
}
[data-theme=light] .access-check-item:hover {
  background: rgba(26, 107, 232, 0.04);
  border-color: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .members-column {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .members-column-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .members-column-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.20);
}
[data-theme=light] .members-column-count {
  background: rgba(26, 107, 232, 0.10);
}
[data-theme=light] .member-item {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .member-item:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(26, 107, 232, 0.18);
}
[data-theme=light] .member-avatar {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.18);
}
[data-theme=light] .member-bulk-btn {
  background: rgba(26, 107, 232, 0.06);
  border-color: rgba(26, 107, 232, 0.18);
}
[data-theme=light] .member-bulk-btn:hover {
  background: rgba(26, 107, 232, 0.12);
  border-color: rgba(26, 107, 232, 0.35);
  box-shadow: 0 0 8px rgba(26, 107, 232, 0.15);
}
[data-theme=light] .member-add-btn {
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .member-add-btn:hover {
  background: #1A6BE8;
  color: #ffffff;
  border-color: #1A6BE8;
  box-shadow: 0 0 10px rgba(26, 107, 232, 0.25);
}
.perm-sections-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.perm-section-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.18);
  border-radius: 100px;
  font-size: 12px;
  color: var(--color-accent);
}
.perm-section-chip-nome {
  font-weight: 600;
}
.perm-section-chip-count {
  font-size: 10px;
  opacity: 0.65;
  font-family: var(--font-data);
}
.perm-no-sections {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 6px;
  display: block;
}
.sections-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sections-builder-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.sections-empty-hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.sections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: border-color 0.18s;
}
.section-row:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.section-row-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-icon-img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
}
.section-icon-emoji {
  font-size: 20px;
  line-height: 1;
}
.section-icon-placeholder {
  font-size: 14px;
  color: var(--color-text-secondary);
  opacity: 0.5;
}
.section-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.section-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.section-row-items {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.section-row-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.18s;
  color: var(--color-text-secondary);
}
.section-row-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}
.section-row-btn.danger:hover {
  background: rgba(255, 77, 109, 0.1);
  border-color: rgba(255, 77, 109, 0.2);
  color: #ff4d6d;
}
.section-icon-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}
.section-icon-inputs {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.section-icon-preview {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}
.section-icon-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-icon-divider {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: 0.05em;
}
.section-icon-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--font-primary);
}
.section-icon-upload-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-text);
}
.section-icon-clear {
  background: none;
  border: none;
  font-size: 11px;
  color: #ff4d6d;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-primary);
  opacity: 0.8;
}
.section-icon-clear:hover {
  opacity: 1;
}
.items-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.items-checklist-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(74, 255, 197, 0.04);
  border: 1px solid rgba(74, 255, 197, 0.1);
  border-radius: 8px;
}
.items-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.items-check-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}
.items-check-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.items-check-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.items-check-label {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}
[data-theme=light] .perm-section-chip {
  background: rgba(26, 107, 232, 0.06);
  border-color: rgba(26, 107, 232, 0.18);
}
[data-theme=light] .sections-empty-hint {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .section-row {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .section-row:hover {
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .section-icon-preview {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .section-icon-upload-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme=light] .section-icon-upload-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.25);
}
[data-theme=light] .items-check-item:hover {
  background: rgba(26, 107, 232, 0.04);
  border-color: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .items-checklist-hint {
  background: rgba(26, 107, 232, 0.04);
  border-color: rgba(26, 107, 232, 0.12);
}
.ag-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ag-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ag-card--open {
  border-color: rgba(74, 255, 197, 0.25);
  box-shadow: 0 0 0 1px rgba(74, 255, 197, 0.08);
}
.ag-card-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.ag-card-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ag-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ag-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-card-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data);
}
.ag-card-chevron {
  color: var(--color-text-secondary);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.ag-card-chevron--open {
  transform: rotate(180deg);
}
.ag-card-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  animation: fadeInDown 0.18s ease both;
}
.ag-card-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 12px 16px 8px;
  line-height: 1.5;
}
.ag-card-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 8px;
}
.ag-card-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
}
.ag-card-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.1s;
  white-space: nowrap;
}
.ag-card-action-btn:active {
  transform: scale(0.97);
}
.ag-card-action-btn--members {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}
.ag-card-action-btn--members:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.35);
}
.ag-card-action-btn--edit {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.2);
  color: var(--color-accent);
}
.ag-card-action-btn--edit:hover {
  background: rgba(74, 255, 197, 0.14);
  border-color: rgba(74, 255, 197, 0.35);
}
.ag-card-action-btn--delete {
  background: rgba(255, 77, 109, 0.08);
  border-color: rgba(255, 77, 109, 0.2);
  color: var(--color-error);
}
.ag-card-action-btn--delete:hover {
  background: rgba(255, 77, 109, 0.14);
  border-color: rgba(255, 77, 109, 0.35);
}
[data-theme=light] .ag-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .ag-card--open {
  border-color: rgba(26, 107, 232, 0.3);
  box-shadow: 0 0 0 1px rgba(26, 107, 232, 0.06);
}
[data-theme=light] .ag-card-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .ag-card-detail {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .ag-card-actions {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .ag-card-action-btn--members {
  color: #7c3aed;
}
[data-theme=light] .ag-card-action-btn--edit {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
  color: var(--color-accent);
}
.members-tab-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -8px;
}
.members-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}
.members-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.members-tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}
.members-tab-btn:hover:not(.active) {
  color: var(--color-text);
}
.members-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-data);
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-secondary);
  transition: background 0.18s, color 0.18s;
}
.members-tab-badge.active {
  background: rgba(74, 255, 197, 0.12);
  color: var(--color-accent);
}
.members-tab-badge.has-count {
  background: rgba(74, 255, 197, 0.08);
  color: var(--color-accent);
}
.members-tab-search {
  margin-bottom: 10px;
}
.members-tab-bulk-btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px dashed rgba(74, 255, 197, 0.25);
  border-radius: 9px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  letter-spacing: 0.02em;
}
.members-tab-bulk-btn:hover {
  background: rgba(74, 255, 197, 0.12);
  border-color: rgba(74, 255, 197, 0.45);
}
.members-tab-bulk-btn--remove {
  background: rgba(255, 77, 109, 0.06);
  border-color: rgba(255, 77, 109, 0.22);
  color: #ff4d6d;
}
.members-tab-bulk-btn--remove:hover {
  background: rgba(255, 77, 109, 0.12);
  border-color: rgba(255, 77, 109, 0.4);
}
.members-tab-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  padding-right: 2px;
}
.members-tab-list::-webkit-scrollbar {
  width: 4px;
}
.members-tab-list::-webkit-scrollbar-track {
  background: transparent;
}
.members-tab-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
[data-theme=light] .members-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .members-tab-btn {
  color: var(--color-text-secondary);
}
[data-theme=light] .members-tab-btn.active {
  color: #1A6BE8;
  border-bottom-color: #1A6BE8;
}
[data-theme=light] .members-tab-badge.active,
[data-theme=light] .members-tab-badge.has-count {
  background: rgba(26, 107, 232, 0.10);
  color: #1A6BE8;
}
[data-theme=light] .members-tab-bulk-btn {
  background: rgba(26, 107, 232, 0.05);
  border-color: rgba(26, 107, 232, 0.22);
  color: #1A6BE8;
}
[data-theme=light] .members-tab-bulk-btn:hover {
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.4);
}
[data-theme=light] .members-tab-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
@media (max-width: 640px) {
  .members-transfer-container {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 12px !important;
    margin-top: 0 !important;
  }
  .members-column {
    height: auto !important;
    max-height: 280px;
    padding: 12px !important;
  }
  .members-column-list {
    max-height: 160px;
  }
  .members-column-title {
    font-size: 13px !important;
  }
  .member-item {
    padding: 8px 10px !important;
  }
  .member-name {
    font-size: 13px !important;
  }
  .member-sub {
    font-size: 11px !important;
  }
}

/* src/pages/Admin/AdminMaterials.css */
.admin-materials-layout {
  display: block;
}
.admin-mat-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.admin-mat-cat-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 240px;
}
.admin-mat-cat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.admin-mat-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-mat-cat-dropdown {
  flex: 1;
  padding: 10px 14px;
  background: var(--color-surface-2, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  transition: border-color 0.2s;
  max-width: 420px;
  color-scheme: dark;
}
.admin-mat-cat-dropdown:focus {
  outline: none;
  border-color: var(--color-accent);
}
.admin-mat-cat-dropdown option {
  background: #1a1a1e;
  color: var(--color-text);
}
[data-theme=light] .admin-mat-cat-dropdown {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color-scheme: light;
}
[data-theme=light] .admin-mat-cat-dropdown option {
  background-color: #ffffff;
  color: #0F1923;
}
.admin-mat-cat-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.18s;
  flex-shrink: 0;
  padding: 0;
}
.admin-mat-cat-action-btn:hover {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.3);
}
.admin-mat-topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.upload-release-section {
  background: rgba(251, 191, 36, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upload-release-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.upload-release-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.upload-release-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.upload-release-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.upload-release-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-surface-2, rgba(255,255,255,0.05));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
  color-scheme: dark;
}
.upload-release-input:focus {
  outline: none;
  border-color: #F59E0B;
}
.upload-release-preview {
  font-size: 12px;
  color: #F59E0B;
  background: rgba(251, 191, 36, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  line-height: 1.5;
}
.admin-materials-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  padding: 6px 8px 10px;
}
.admin-cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.admin-cat-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-cat-item.active {
  background: rgba(74, 255, 197, 0.08);
  border: 1px solid rgba(74, 255, 197, 0.2);
}
.admin-cat-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-cat-item.active .admin-cat-name {
  color: var(--color-accent);
}
.admin-cat-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.admin-cat-item:hover .admin-cat-actions {
  opacity: 1;
}
.admin-materials-content {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  min-height: 300px;
}
.admin-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: var(--transition);
}
.admin-item-row:hover {
  border-color: rgba(255, 255, 255, 0.1);
}
.admin-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.admin-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-item-size {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data);
  white-space: nowrap;
}
.upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: rgba(74, 255, 197, 0.4);
  background: rgba(74, 255, 197, 0.03);
}
.upload-zone.has-file {
  border-style: solid;
  border-color: rgba(74, 255, 197, 0.3);
}
.upload-zone-text {
  font-size: 14px;
  color: var(--color-text-muted);
}
.upload-zone-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.upload-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.upload-file-icon {
  font-size: 28px;
}
.upload-file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.upload-file-size {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data);
}
.upload-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 16px;
  margin-left: auto;
  transition: color 0.2s;
}
.upload-remove:hover {
  color: var(--color-error);
}
.upload-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.upload-progress-fill {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #4AFFC5,
      #2DD4A0);
  border-radius: 2px;
  transition: width 0.3s;
}
.upload-thumb-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-thumb-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.upload-thumb-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 10px;
}
.upload-thumb-zone {
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-thumb-zone:hover {
  border-color: rgba(74, 255, 197, 0.35);
  background: rgba(74, 255, 197, 0.02);
}
.upload-thumb-zone.has-thumb {
  border-style: solid;
  border-color: rgba(74, 255, 197, 0.3);
  min-height: unset;
}
.upload-thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
}
.upload-thumb-placeholder-text {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.upload-thumb-preview {
  position: relative;
  width: 100%;
}
.upload-thumb-img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
}
.upload-thumb-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.upload-thumb-remove:hover {
  background: rgba(220, 50, 50, 0.85);
}
.upload-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.upload-mode-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.upload-mode-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}
.upload-mode-btn.active {
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
  border: 1px solid rgba(74, 255, 197, 0.25);
}
.upload-link-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.upload-link-preview {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.upload-link-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.upload-link-type-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.upload-link-preview-ok {
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 600;
}
.upload-link-yt-preview {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.upload-link-yt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-link-yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  font-size: 48px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.upload-link-gdrive-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.upload-link-hint {
  font-size: 12px;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 10px 14px;
  border-radius: 8px;
}
.upload-link-tips {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-link-tip {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.upload-link-tip strong {
  color: var(--color-text-muted);
}
.upload-link-tip em {
  color: var(--color-accent);
  font-style: normal;
}
@media (max-width: 700px) {
  .admin-materials-layout {
    grid-template-columns: 1fr;
  }
}
.upload-link-tag-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upload-link-tag-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.upload-link-tag-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.upload-tag-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.upload-tag-btn span:first-child {
  font-size: 20px;
}
.upload-tag-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: rgba(74, 255, 197, 0.06);
}
.upload-tag-btn.active {
  border-color: var(--color-accent);
  background: rgba(74, 255, 197, 0.12);
  color: var(--color-accent);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}
.upload-expires-section {
  background: rgba(239, 68, 68, 0.04) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}
.upload-expires-input {
  border-color: rgba(239, 68, 68, 0.3) !important;
}
.upload-expires-input:focus {
  border-color: #EF4444 !important;
}
.upload-expires-preview {
  font-size: 12px;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  line-height: 1.5;
}
.cat-icon-upload-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.cat-icon-upload-zone:hover {
  border-color: var(--color-accent);
  background: rgba(74, 255, 197, 0.04);
}
.cat-icon-preview {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.cat-icon-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.cat-icon-upload-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.cat-icon-upload-text strong {
  display: block;
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 2px;
}
[data-theme=light] .admin-mat-topbar {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .admin-mat-cat-label {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme=light] .admin-mat-cat-dropdown {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-text);
}
[data-theme=light] .admin-mat-cat-dropdown:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .admin-mat-cat-dropdown option {
  background-color: #ffffff;
  color: #0F1923;
}
[data-theme=light] .admin-mat-cat-action-btn {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .admin-mat-cat-action-btn:hover {
  background: rgba(26, 107, 232, 0.09);
  border-color: rgba(26, 107, 232, 0.28);
}
[data-theme=light] .admin-materials-content {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .admin-item-row {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .admin-item-row:hover {
  border-color: rgba(26, 107, 232, 0.20);
  box-shadow: 0 2px 8px rgba(26, 107, 232, 0.06);
}
[data-theme=light] .upload-zone {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.70);
}
[data-theme=light] .upload-zone:hover,
[data-theme=light] .upload-zone.drag-over {
  border-color: rgba(26, 107, 232, 0.45);
  background: rgba(26, 107, 232, 0.03);
}
[data-theme=light] .upload-zone.has-file {
  border-color: rgba(26, 107, 232, 0.35);
}
[data-theme=light] .upload-thumb-zone {
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .upload-thumb-zone:hover {
  border-color: rgba(26, 107, 232, 0.40);
  background: rgba(26, 107, 232, 0.02);
}
[data-theme=light] .upload-thumb-zone.has-thumb {
  border-color: rgba(26, 107, 232, 0.30);
}
[data-theme=light] .upload-thumb-hint {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme=light] .upload-mode-toggle {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .upload-mode-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .upload-mode-btn.active {
  background: rgba(26, 107, 232, 0.10);
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.28);
}
[data-theme=light] .upload-tag-btn:hover {
  border-color: #1A6BE8;
  background: rgba(26, 107, 232, 0.06);
  color: #1A6BE8;
}
[data-theme=light] .upload-tag-btn.active {
  border-color: #1A6BE8;
  background: rgba(26, 107, 232, 0.10);
  color: #1A6BE8;
  box-shadow: 0 0 0 1px #1A6BE8 inset;
}
[data-theme=light] .upload-link-preview {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .upload-link-preview-header {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .upload-link-preview-ok {
  color: #1A6BE8;
}
[data-theme=light] .upload-link-tips {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .upload-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .upload-progress-fill {
  background:
    linear-gradient(
      90deg,
      #1A6BE8,
      #1250B0);
}
[data-theme=light] .cat-icon-upload-zone {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.14);
}
[data-theme=light] .cat-icon-upload-zone:hover {
  border-color: #1A6BE8;
  background: rgba(26, 107, 232, 0.05);
}
[data-theme=light] .cat-icon-placeholder {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.18);
}
.admin-materials-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  padding-bottom: 2px;
}
.admin-materials-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-materials-tab-btn:hover {
  color: var(--color-text);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.admin-materials-tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
[data-theme=light] .admin-materials-tab-btn.active {
  color: #1A6BE8;
  border-bottom-color: #1A6BE8;
}
.admin-creator-workspace {
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  min-height: 640px;
  max-height: 85vh;
}
.admin-creator-leftbar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid var(--color-border);
  padding-right: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}
.admin-creator-rightbar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(0, 0, 0, 0.15);
  border-left: 1px solid var(--color-border);
  padding-left: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}
.admin-creator-canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 480px;
}
.admin-creator-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-origin: center center;
  transition: transform 0.15s ease;
}
.admin-creator-canvas {
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  user-select: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.creator-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.creator-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.creator-size-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.creator-size-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.creator-size-card.active {
  background: rgba(74, 255, 197, 0.05);
  border-color: var(--color-accent);
}
[data-theme=light] .creator-size-card.active {
  background: rgba(26, 107, 232, 0.05);
  border-color: #1A6BE8;
}
.creator-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: 13px;
  transition: border-color 0.2s;
}
.creator-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
[data-theme=light] .creator-input:focus {
  border-color: #1A6BE8;
}
.creator-textarea {
  min-height: 80px;
  resize: vertical;
}
.creator-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.creator-row-grid {
  display: flex;
  gap: 8px;
}
.creator-layer {
  position: absolute;
  cursor: move;
  box-sizing: border-box;
}
.creator-layer.selected {
  outline: 2px solid var(--color-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
[data-theme=light] .creator-layer.selected {
  outline-color: #1A6BE8;
}
.creator-layer-text {
  word-break: break-word;
  white-space: pre-wrap;
  user-select: none;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.creator-layer-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.layer-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
[data-theme=light] .layer-resize-handle {
  border-color: #1A6BE8;
}
.font-style-btn-group {
  display: flex;
  gap: 4px;
}
.font-style-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--color-text-secondary);
}
.font-style-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}
.font-style-btn.active {
  background: rgba(74, 255, 197, 0.15);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[data-theme=light] .font-style-btn.active {
  background: rgba(26, 107, 232, 0.1);
  border-color: #1A6BE8;
  color: #1A6BE8;
}
.creator-export-dropdown-wrapper {
  position: relative;
  width: 100%;
}
.creator-export-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.upload-bg-preview {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  border: 1px dashed var(--color-border);
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.upload-bg-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-bg-placeholder {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
[data-theme=light] .admin-creator-workspace {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .admin-creator-leftbar,
[data-theme=light] .admin-creator-rightbar {
  background: rgba(0, 0, 0, 0.015);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .admin-creator-canvas-area {
  background: #f1f5f9;
}
[data-theme=light] .creator-size-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .creator-size-card:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme=light] .creator-input {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme=light] .font-style-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .upload-bg-preview {
  background: rgba(0, 0, 0, 0.02);
}

/* src/pages/Admin/AdminPolicies.css */
.policy-admin-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 18px 20px;
  transition: var(--transition);
}
.policy-admin-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.policy-admin-info {
  flex: 1;
  min-width: 0;
}
.policy-admin-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.policy-admin-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.policy-admin-table,
.policy-admin-date {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data);
}
.groups-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 6px;
}
.checkbox-label-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.checkbox-label-item input[type=checkbox] {
  accent-color: var(--color-accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.toggle-buttons {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 14px;
  transition: var(--transition);
}
.toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text);
}
.toggle-btn.active {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.table-builder-container {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 6px;
}
.builder-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.builder-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.builder-empty-info {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 20px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.builder-columns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
.builder-col-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-3);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.builder-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  color: var(--color-error);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.builder-remove-btn:hover {
  background: var(--color-error-bg);
}
.builder-rows-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
}
.builder-rows-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.builder-rows-table th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.builder-rows-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}
.builder-rows-table tr:last-child td {
  border-bottom: none;
}
.input-table-cell {
  background: transparent;
  border: 1px solid transparent;
}
.input-table-cell:focus {
  border-color: var(--color-accent);
  background: var(--color-surface-2);
}
.input-field-sm {
  padding: 8px 12px;
  font-size: 13px;
}
.admin-select-sm {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: var(--radius-md);
}
.policy-preview-admin {
  padding: 4px 0;
}
.policy-preview-admin .policy-detail-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}
.policy-preview-admin .policy-detail-content {
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.policy-preview-admin .policy-bank-data {
  border-radius: 12px;
  padding: 20px;
}
.apc-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.apc-card--open {
  border-color: rgba(74, 255, 197, 0.25);
  box-shadow: 0 0 0 1px rgba(74, 255, 197, 0.06);
}
.apc-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.apc-card-icon {
  width: 36px;
  height: 36px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.apc-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.apc-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  word-break: break-word;
}
.apc-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.apc-card-chevron {
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.apc-card-chevron--open {
  transform: rotate(180deg);
}
.apc-card-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.apc-card-meta-row:last-of-type {
  border-bottom: none;
}
.apc-card-meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.apc-card-meta-value {
  font-size: 13px;
  color: var(--color-text);
  font-family: var(--font-data);
}
.apc-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 8px;
}
.apc-card-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.18s;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.apc-card-action-btn--view {
  background: rgba(74, 255, 197, 0.05);
  border-color: rgba(74, 255, 197, 0.12);
  color: var(--color-accent);
}
.apc-card-action-btn--view:hover {
  background: rgba(74, 255, 197, 0.12);
  border-color: rgba(74, 255, 197, 0.3);
}
.apc-card-action-btn--edit {
  background: rgba(99, 179, 237, 0.06);
  border-color: rgba(99, 179, 237, 0.15);
  color: #63b3ed;
}
.apc-card-action-btn--edit:hover {
  background: rgba(99, 179, 237, 0.14);
  border-color: rgba(99, 179, 237, 0.35);
}
.apc-card-action-btn--delete {
  background: rgba(255, 77, 109, 0.06);
  border-color: rgba(255, 77, 109, 0.15);
  color: #ff4d6d;
}
.apc-card-action-btn--delete:hover {
  background: rgba(255, 77, 109, 0.14);
  border-color: rgba(255, 77, 109, 0.35);
}
.policy-form-section {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.policy-form-section:last-child {
  border-bottom: none;
}
.policy-form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}
.policy-form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.policy-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 500px) {
  .policy-form-row {
    grid-template-columns: 1fr;
  }
}
.builder-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  margin-top: 8px;
}
.builder-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.builder-step-badge {
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.builder-step-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.builder-add-btn {
  background: rgba(74, 255, 197, 0.08);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: var(--color-accent);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.builder-add-btn:hover {
  background: rgba(74, 255, 197, 0.16);
  border-color: rgba(74, 255, 197, 0.4);
  box-shadow: 0 0 8px rgba(74, 255, 197, 0.15);
}
.builder-col-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px 12px;
}
.builder-col-number {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.builder-col-inputs {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.builder-col-name-input {
  flex: 2;
  min-width: 0;
}
.builder-col-type-select {
  flex: 1;
  min-width: 80px;
}
@media (max-width: 480px) {
  .builder-col-inputs {
    flex-direction: column;
    gap: 6px;
  }
  .builder-col-type-select {
    min-width: unset;
  }
}
[data-theme=light] .apc-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .apc-card--open {
  border-color: rgba(26, 107, 232, 0.3);
  box-shadow: 0 0 0 1px rgba(26, 107, 232, 0.06);
}
[data-theme=light] .apc-card-icon {
  background: rgba(26, 107, 232, 0.06);
  border-color: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .apc-card-detail {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .apc-card-meta-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .apc-card-actions {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .apc-card-action-btn--view {
  background: rgba(26, 107, 232, 0.06);
  border-color: rgba(26, 107, 232, 0.15);
  color: #1A6BE8;
}
[data-theme=light] .apc-card-action-btn--view:hover {
  background: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .apc-card-action-btn--edit {
  color: #2b6cb0;
}
[data-theme=light] .policy-form-section {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .builder-step {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .builder-step-badge {
  background: #1A6BE8;
  color: #fff;
}
[data-theme=light] .builder-add-btn {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
  color: #1A6BE8;
}
[data-theme=light] .builder-add-btn:hover {
  background: rgba(26, 107, 232, 0.14);
  border-color: rgba(26, 107, 232, 0.4);
}
[data-theme=light] .builder-col-item {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .builder-col-number {
  background: rgba(0, 0, 0, 0.07);
}
.builder-mobile-rank {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.builder-mobile-rank-label {
  font-size: 13px;
  margin-right: 2px;
  opacity: 0.7;
}
.builder-rank-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
  padding: 0;
}
.builder-rank-btn:hover:not(:disabled) {
  border-color: rgba(74, 255, 197, 0.35);
  background: rgba(74, 255, 197, 0.08);
  color: var(--color-accent);
}
.builder-rank-btn--active {
  background: rgba(74, 255, 197, 0.15);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 8px rgba(74, 255, 197, 0.2);
}
.builder-rank-btn--disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.builder-mobile-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(74, 255, 197, 0.04);
  border: 1px solid rgba(74, 255, 197, 0.1);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.builder-mobile-hint strong {
  color: var(--color-accent);
}
[data-theme=light] .builder-rank-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text-secondary);
}
[data-theme=light] .builder-rank-btn--active {
  background: rgba(26, 107, 232, 0.1);
  border-color: #1A6BE8;
  color: #1A6BE8;
}
[data-theme=light] .builder-mobile-hint {
  background: rgba(26, 107, 232, 0.04);
  border-color: rgba(26, 107, 232, 0.12);
}

/* src/pages/Admin/AdminCompliance.css */
.admin-compliance-page {
  padding: 1.5rem 2rem 4rem;
  max-width: 1440px;
  margin: 0 auto;
  color: var(--color-text, #ffffff);
  font-family: var(--font-primary, "Sora", sans-serif);
}
.desktop-only {
  display: flex !important;
}
div.desktop-only,
table.desktop-only {
  display: block !important;
}
.mobile-only {
  display: none !important;
}
@media (max-width: 860px) {
  .admin-compliance-page {
    padding: 1rem 0.85rem 3.5rem;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: flex !important;
  }
  div.mobile-only,
  p.mobile-only {
    display: block !important;
  }
  span.mobile-only {
    display: inline !important;
  }
}
.admin-comp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}
.breadcrumb-separator {
  color: #475569;
}
.breadcrumb-current {
  color: #cbd5e1;
  font-weight: 600;
}
.admin-comp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.admin-comp-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 780px;
}
.admin-title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.admin-title-shield-icon {
  flex-shrink: 0;
}
.admin-comp-title-group h1 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
}
.admin-header-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.45;
}
.admin-mobile-tags-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.admin-badge-category {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 223, 143, 0.25);
  text-transform: uppercase;
}
.admin-badge-ready {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #10b981;
}
.admin-comp-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-header-dossier {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 1.15rem;
  border-radius: 9px;
  background: #14171f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-header-dossier:hover:not(:disabled) {
  background: #1d222e;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.btn-header-dossier:disabled {
  opacity: 0.6;
  cursor: wait;
}
.btn-header-create-policy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 9px;
  background: #00df8f;
  border: none;
  color: #05140d;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(0, 223, 143, 0.25);
  white-space: nowrap;
}
.btn-header-create-policy:hover {
  background: #00c77f;
  transform: translateY(-1px);
}
.admin-mobile-cta-wrap {
  width: 100%;
  margin-top: 0.5rem;
}
.btn-mobile-full-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: #00df8f;
  border: none;
  color: #05140d;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 223, 143, 0.2);
  transition: background 0.2s ease;
}
.btn-mobile-full-create:active {
  background: #00c77f;
}
.admin-comp-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-metric-card-box {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.metric-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.metric-box-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #94a3b8;
  text-transform: uppercase;
}
.metric-box-main-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.metric-main-number {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-data, "Roboto", sans-serif);
  line-height: 1.1;
}
.metric-main-number.highlight {
  color: #00df8f;
}
.metric-trend-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.12);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.metric-badge-bacen {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.3);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.metric-badge-homologado {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.metric-badge-sha {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: #94a3b8;
}
.metric-box-footer {
  font-size: 0.74rem;
  color: #64748b;
}
.metric-box-footer.split {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.metric-box-footer .separator {
  color: #475569;
}
.metric-box-footer .text-warning {
  color: #f59e0b;
  font-weight: 600;
}
.metric-box-footer .text-success {
  color: #00df8f;
  font-weight: 600;
}
.metric-box-footer.pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mini-pill {
  font-size: 0.62rem;
  font-weight: 700;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.1);
  border: 1px solid rgba(0, 223, 143, 0.2);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.admin-mobile-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mobile-metric-tile {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tile-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tile-lbl {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  text-transform: uppercase;
}
.tile-badge-trend {
  font-size: 0.62rem;
  font-weight: 800;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.12);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.tile-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.tile-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-data, "Roboto", sans-serif);
}
.tile-val.highlight {
  color: #00df8f;
}
.tile-val-tag {
  font-size: 0.62rem;
  font-weight: 800;
  color: #00df8f;
  letter-spacing: 0.04em;
}
.tile-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}
.tile-progress-fill {
  height: 100%;
  background: #00df8f;
  border-radius: 2px;
}
.tile-sub {
  font-size: 0.7rem;
  color: #64748b;
}
.tile-sub.text-success {
  color: #00df8f;
  font-weight: 600;
}
.admin-architecture-banner {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.95rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.arch-banner-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.arch-banner-preview-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 223, 143, 0.1);
  border: 1px solid rgba(0, 223, 143, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arch-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.arch-banner-title-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.arch-badge-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
}
.arch-sub-title {
  font-size: 0.74rem;
  color: #94a3b8;
}
.arch-banner-desc {
  font-size: 0.76rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}
.arch-banner-right {
  flex-shrink: 0;
}
.arch-timestamp {
  font-size: 0.74rem;
  font-family: var(--font-data, monospace);
  color: #94a3b8;
}
.admin-comp-nav-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
  padding-bottom: 0;
  white-space: nowrap;
  gap: 1rem;
}
.nav-tabs-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow-x: auto;
}
.admin-nav-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.2rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -1px;
}
.admin-nav-tab-btn:hover {
  color: #ffffff;
}
.admin-nav-tab-btn.active {
  color: #00df8f;
  border-bottom: 2px solid #00df8f;
  font-weight: 700;
}
.tab-counter-pill {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: #cbd5e1;
}
.tab-alert-pill {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.nav-tabs-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 0.5rem;
}
.audit-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 223, 143, 0.08);
  border: 1px solid rgba(0, 223, 143, 0.2);
  font-size: 0.76rem;
  color: #94a3b8;
}
.audit-sync-badge strong.sync-count {
  color: #00df8f;
  font-weight: 700;
}
.sync-sep {
  opacity: 0.4;
  font-size: 0.7rem;
}
.sync-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00df8f;
  box-shadow: 0 0 8px #00df8f;
  animation: pulse-dot-anim 2s infinite ease-in-out;
}
@keyframes pulse-dot-anim {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}
.admin-mobile-tabs-bar {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 4px;
  background: #0e1117;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.85rem;
}
.mobile-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
}
.mobile-tab-btn.active {
  background: #171d26;
  color: #00df8f;
  border: 1px solid rgba(0, 223, 143, 0.25);
  font-weight: 700;
}
.admin-audit-toolbar-panel {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.toolbar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.toolbar-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  background: #141923;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 0 1rem;
  height: 42px;
  transition: all 0.2s ease;
}
.toolbar-search-field:focus-within {
  border-color: #00df8f;
  background: #171d28;
  box-shadow: 0 0 0 3px rgba(0, 223, 143, 0.12);
}
.toolbar-search-icon {
  color: #64748b;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.toolbar-search-field:focus-within .toolbar-search-icon {
  color: #00df8f;
}
.toolbar-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.84rem;
  margin-left: 0.65rem;
}
.toolbar-search-input::placeholder {
  color: #64748b;
}
.toolbar-clear-btn {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #94a3b8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.toolbar-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.toolbar-actions-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.btn-toolbar-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 42px;
  padding: 0 0.95rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-toolbar-reset:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}
.btn-toolbar-export-csv {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding: 0 1.15rem;
  border-radius: 10px;
  background: #141923;
  border: 1px solid rgba(0, 223, 143, 0.3);
  color: #00df8f;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-toolbar-export-csv:hover:not(:disabled) {
  background: rgba(0, 223, 143, 0.12);
  border-color: #00df8f;
  transform: translateY(-1px);
}
.toolbar-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}
.toolbar-filters-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.toolbar-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}
.toolbar-dropdown-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-mini-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  padding-left: 2px;
}
.toolbar-select {
  height: 36px;
  padding: 0 2rem 0 0.85rem;
  border-radius: 8px;
  background-color: #141923;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}
.toolbar-select:hover {
  background-color: #181f2b;
  border-color: rgba(255, 255, 255, 0.16);
}
.toolbar-select:focus {
  border-color: #00df8f;
  box-shadow: 0 0 0 2px rgba(0, 223, 143, 0.15);
}
.toolbar-results-count {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-left: auto;
}
.results-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 0.78rem;
}
.results-count-pill strong {
  color: #00df8f;
  font-weight: 700;
}
.admin-mobile-controls-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.mobile-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.mobile-search-input-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 0 0.75rem;
  height: 40px;
}
.mobile-search-input-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.82rem;
  width: 100%;
  margin-left: 0.45rem;
}
.btn-mobile-export-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.mobile-status-chips-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 2px;
}
.mobile-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.mobile-filter-chip.active {
  background: rgba(0, 223, 143, 0.12);
  border-color: rgba(0, 223, 143, 0.3);
  color: #00df8f;
  font-weight: 700;
}
.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.chip-dot.dot-green {
  background: #00df8f;
  box-shadow: 0 0 6px #00df8f;
}
.chip-dot.dot-amber {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}
.mobile-records-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.8rem;
}
.records-header-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  font-weight: 700;
}
.records-header-right {
  color: #64748b;
  font-size: 0.74rem;
}
.admin-audit-table-wrapper {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.5rem 1.25rem 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  margin-bottom: 2rem;
  overflow-x: auto;
}
.admin-audit-table-modern {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-audit-table-modern thead th {
  padding: 1rem 0.75rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-transform: uppercase;
}
.admin-audit-table-modern tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}
.admin-audit-table-modern tbody tr:last-child {
  border-bottom: none;
}
.admin-audit-table-modern tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}
.admin-audit-table-modern tbody td {
  padding: 1.15rem 0.75rem;
  vertical-align: middle;
}
.user-cell-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.user-monogram-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.user-monogram-circle.color-teal {
  background: rgba(0, 223, 143, 0.15);
  color: #00df8f;
  border: 1px solid rgba(0, 223, 143, 0.3);
}
.user-monogram-circle.color-blue {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.user-monogram-circle.color-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.user-monogram-circle.color-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.user-monogram-circle.color-cyan {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.3);
}
.user-meta-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-name-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.user-full-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
}
.user-details-sub {
  font-size: 0.74rem;
  color: #64748b;
}
.group-profile-text {
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 500;
}
.doc-version-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-name-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e2e8f0;
}
.doc-version-tag {
  font-size: 0.72rem;
  color: #64748b;
}
.date-status-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.date-time-line {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e2e8f0;
}
.date-sub-tz {
  font-size: 0.68rem;
  color: #64748b;
}
.table-actions-inline {
  margin-top: 4px;
}
.btn-view-term-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-view-term-mini:hover {
  background: rgba(0, 223, 143, 0.12);
  color: #00df8f;
  border-color: rgba(0, 223, 143, 0.3);
}
.status-badge-pending-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #f59e0b;
  font-size: 0.74rem;
  font-weight: 700;
}
.btn-table-resend-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 3px;
  width: fit-content;
}
.btn-table-resend-notice:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
.audit-table-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1rem 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: #64748b;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pagination-lines-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
}
.pagination-lines-select {
  height: 32px;
  background: #171b24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.76rem;
  padding: 0 0.5rem;
  cursor: pointer;
}
.pagination-pages-group {
  display: flex;
  align-items: center;
  gap: 3px;
}
.page-num-btn,
.page-nav-arrow {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.page-num-btn.active {
  background: #00df8f;
  color: #05140d;
  font-weight: 800;
}
.page-num-btn:hover:not(.active),
.page-nav-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.page-nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.page-dots {
  color: #64748b;
  padding: 0 2px;
}
.audit-custody-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1017;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  margin-top: 0.75rem;
  gap: 1.5rem;
}
.custody-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.custody-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 223, 143, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.custody-text-block {
  display: flex;
  flex-direction: column;
}
.custody-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
}
.custody-desc {
  font-size: 0.7rem;
  color: #64748b;
  margin: 0;
}
.custody-bar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.custody-badge-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}
.custody-badge-icp {
  font-size: 0.72rem;
  font-weight: 700;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.1);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}
.admin-mobile-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.mobile-audit-card {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.mobile-audit-card.card-pending {
  border-left: 3px solid #ef4444;
}
.mobile-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.mobile-card-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-user-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.mobile-user-sub {
  font-size: 0.74rem;
  color: #94a3b8;
}
.mobile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.mobile-status-pill.pill-accepted {
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.25);
  color: #00df8f;
}
.mobile-status-pill.pill-pending {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}
.mobile-doc-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
}
.mobile-date-ip-line {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  color: #64748b;
}
.mobile-meta-date,
.mobile-meta-ip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mobile-card-crypto-box {
  background: #080a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.crypto-box-lbl {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
  text-transform: uppercase;
}
.crypto-hash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.crypto-hash-text {
  font-family: var(--font-data, "Roboto", monospace);
  font-size: 0.76rem;
  color: #00df8f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crypto-copy-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.crypto-copy-btn:hover {
  color: #00df8f;
}
.mobile-card-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.2rem;
}
.btn-card-action-cert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 40px;
  border-radius: 9px;
  background: #181b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-card-action-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 40px;
  border-radius: 9px;
  background: rgba(0, 223, 143, 0.12);
  border: 1px solid rgba(0, 223, 143, 0.25);
  color: #00df8f;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.mobile-pending-alert-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 9px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pending-alert-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f59e0b;
}
.pending-alert-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}
.mobile-pending-timeline-box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: #64748b;
  background: #0e1117;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
}
.btn-mobile-charge-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 42px;
  border-radius: 9px;
  background: #991b1b;
  border: 1px solid #dc2626;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(153, 27, 27, 0.3);
  margin-top: 0.25rem;
}
.btn-mobile-charge-action:active {
  background: #b91c1c;
}
.btn-mobile-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: #14171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
}
.mobile-custody-card {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}
.mobile-custody-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 800;
  color: #00df8f;
  letter-spacing: 0.04em;
}
.mobile-custody-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.45;
}
.admin-policies-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.sub-header-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}
.sub-header-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}
.admin-policies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.15rem;
  margin-bottom: 2rem;
}
.admin-policy-item-card {
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.policy-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.policy-cat-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #00df8f;
  background: rgba(0, 223, 143, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}
.policy-version-pill {
  font-size: 0.7rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.policy-item-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
}
.policy-item-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0;
}
.policy-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.85rem;
}
.policy-active-status {
  font-size: 0.72rem;
  font-weight: 600;
}
.policy-active-status.active {
  color: #00df8f;
}
.policy-active-status.inactive {
  color: #64748b;
}
.policy-item-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.btn-policy-action {
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: #181c25;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-policy-action:hover {
  background: #222734;
  color: #ffffff;
}
.btn-policy-action.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.admin-policy-form-modal .modal-content {
  background: #11141b !important;
  color: #ffffff;
}
.admin-policy-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
  }
}
.form-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
}
.field-label-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-link-action {
  background: none;
  border: none;
  color: #00df8f;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}
.btn-link-action:hover {
  text-decoration: underline;
  opacity: 0.85;
}
.new-category-input-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.new-category-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-form-input {
  flex: 1;
  background: #171b24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  padding: 0.65rem 0.85rem;
  font-size: 0.84rem;
  outline: none;
}
.admin-form-input:focus {
  border-color: #00df8f;
}
.btn-cancel-new-cat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 8px;
  width: 36px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-cancel-new-cat:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.new-cat-hint {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.3;
}
.admin-form-select,
.admin-form-textarea {
  background: #171b24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  padding: 0.65rem 0.85rem;
  font-size: 0.84rem;
  outline: none;
}
.admin-form-select:focus,
.admin-form-textarea:focus {
  border-color: #00df8f;
}
.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 1.5rem;
  cursor: pointer;
}
.modal-actions-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
}
.btn-modal-cancel {
  height: 38px;
  padding: 0 1.15rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-modal-submit {
  height: 38px;
  padding: 0 1.25rem;
  border-radius: 8px;
  background: #00df8f;
  border: none;
  color: #05140d;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.report-detail-card {
  background: #171b24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.detail-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}
.detail-line-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.detail-lbl {
  color: #94a3b8;
  font-size: 0.74rem;
}
.detail-val {
  color: #ffffff;
}
.detail-desc-box {
  background: #0e1117;
  padding: 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.45;
}
.admin-version-bump-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  animation: fadeIn 0.25s ease-in-out;
}
.bump-alert-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.bump-alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.bump-alert-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fbbf24;
}
.bump-alert-badge {
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.bump-alert-desc {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
}
.bump-alert-desc strong {
  color: #ffffff;
}
.bump-alert-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.bump-actions-lbl {
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 600;
}
.btn-bump-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-bump-chip:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.btn-bump-chip.selected {
  background: rgba(0, 223, 143, 0.15);
  border-color: #00df8f;
  color: #00df8f;
}
.compliance-folders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.folders-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  flex: 1;
}
.folders-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.folder-search-input-wrap {
  position: relative;
  min-width: 260px;
  max-width: 380px;
  flex: 1;
}
.folder-search-input-wrap svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}
.folder-search-input {
  width: 100%;
  padding: 0.5rem 0.85rem 0.5rem 2.35rem;
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.82rem;
  outline: none;
  transition: all 0.2s ease;
}
.folder-search-input:focus {
  border-color: #00df8f;
  box-shadow: 0 0 0 3px rgba(0, 223, 143, 0.12);
}
.folder-view-toggle {
  display: inline-flex;
  background: #0d0f15;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-view-toggle {
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-view-toggle:hover {
  color: #ffffff;
}
.btn-view-toggle.active {
  background: #1a202c;
  color: #00df8f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.btn-header-create-folder {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #161a23;
  border: 1px solid rgba(0, 223, 143, 0.35);
  color: #00df8f;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-header-create-folder:hover {
  background: rgba(0, 223, 143, 0.12);
  border-color: #00df8f;
  transform: translateY(-1px);
}
.compliance-folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.compliance-folder-card {
  position: relative;
  background: #11141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.compliance-folder-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--folder-accent, #00df8f);
  opacity: 0.8;
  transition: height 0.2s ease, opacity 0.2s ease;
}
.compliance-folder-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 223, 143, 0.08);
}
.compliance-folder-card:hover::before {
  height: 4px;
  opacity: 1;
}
.folder-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.folder-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}
.folder-card-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.folder-card-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.folder-badge-system {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.folder-badge-custom {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(0, 223, 143, 0.12);
  color: #00df8f;
  border: 1px solid rgba(0, 223, 143, 0.25);
}
.folder-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.folder-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
}
.folder-card-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0;
  min-height: 2.85em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.folder-card-stats-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.folder-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.74rem;
  color: #cbd5e1;
}
.folder-stat-pill.active {
  border-color: rgba(0, 223, 143, 0.25);
  background: rgba(0, 223, 143, 0.06);
  color: #00df8f;
}
.stat-pill-num {
  font-weight: 700;
  color: #ffffff;
}
.stat-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00df8f;
  display: inline-block;
}
.folder-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.85rem;
  margin-top: 0.2rem;
}
.folder-open-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: #00df8f;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.15s ease;
}
.compliance-folder-card:hover .folder-open-hint {
  gap: 0.55rem;
}
.folder-actions-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-folder-action {
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: #181c25;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-folder-action:hover {
  background: #242b38;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-folder-action.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
}
.compliance-folder-card.create-new-folder-card {
  border: 2px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.015);
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 220px;
  gap: 0.75rem;
}
.compliance-folder-card.create-new-folder-card::before {
  display: none;
}
.compliance-folder-card.create-new-folder-card:hover {
  border-color: #00df8f;
  background: rgba(0, 223, 143, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.create-folder-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 223, 143, 0.1);
  color: #00df8f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  transition: transform 0.2s ease;
}
.compliance-folder-card.create-new-folder-card:hover .create-folder-icon-circle {
  transform: scale(1.1);
  background: rgba(0, 223, 143, 0.18);
}
.create-folder-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.create-folder-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
  max-width: 240px;
  line-height: 1.4;
}
.folder-nav-breadcrumbs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.folder-breadcrumbs-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: #161a23;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-breadcrumb-back:hover {
  background: #222734;
  border-color: rgba(0, 223, 143, 0.4);
  color: #00df8f;
}
.breadcrumb-sep {
  color: #64748b;
  font-size: 0.9rem;
}
.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.breadcrumb-icon {
  font-size: 1.25rem;
}
.folder-breadcrumbs-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.folder-inner-banner {
  background:
    linear-gradient(
      135deg,
      rgba(22, 26, 35, 0.95),
      rgba(17, 20, 27, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.folder-inner-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.folder-inner-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.folder-inner-title-col h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}
.folder-inner-title-col p {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}
.folder-inner-stats {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.admin-folder-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.folder-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.45rem;
}
.btn-icon-pick {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #161a23;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-icon-pick:hover {
  background: #222734;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-icon-pick.selected {
  background: rgba(0, 223, 143, 0.18);
  border-color: #00df8f;
  transform: scale(1.05);
}
.color-picker-grid {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.btn-color-pick {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-color-pick:hover {
  transform: scale(1.15);
}
.btn-color-pick.selected {
  border-color: #ffffff;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.folder-preview-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.85rem;
}
.preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  display: block;
  margin-bottom: 0.5rem;
}
.compliance-folder-card.preview {
  margin-bottom: 0;
  cursor: default;
}
.compliance-folder-card.preview:hover {
  transform: none;
}
.policy-audience-row {
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}
.policy-audience-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.policy-audience-badge.all {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.policy-audience-badge.specific {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.admin-audience-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 1rem;
}
.admin-audience-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 680px) {
  .admin-audience-options {
    grid-template-columns: 1fr;
  }
}
.audience-option-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.audience-option-card:hover {
  border-color: rgba(0, 223, 143, 0.4);
  background: rgba(0, 223, 143, 0.03);
}
.audience-option-card.active {
  border-color: #00df8f;
  background: rgba(0, 223, 143, 0.08);
  box-shadow: 0 0 16px rgba(0, 223, 143, 0.15);
}
.audience-option-card input[type=radio] {
  margin-top: 0.25rem;
  accent-color: #00df8f;
  cursor: pointer;
}
.audience-option-content {
  display: flex;
  gap: 0.6rem;
}
.audience-option-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.audience-option-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 0.2rem;
}
.audience-option-desc {
  font-size: 0.73rem;
  color: #94a3b8;
  line-height: 1.35;
  margin: 0;
}
.admin-specific-target-box {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.specific-target-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.target-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.target-block-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.btn-select-all-groups {
  background: none;
  border: none;
  color: #00df8f;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.btn-select-all-groups:hover {
  text-decoration: underline;
  opacity: 0.85;
}
.target-count-badge {
  font-size: 0.7rem;
  background: rgba(0, 223, 143, 0.15);
  color: #00df8f;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-weight: 700;
}
.target-empty-hint {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
}
.groups-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}
.group-checkbox-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  color: #cbd5e1;
  transition: all 0.18s ease;
  user-select: none;
}
.group-checkbox-pill:hover {
  border-color: rgba(0, 223, 143, 0.3);
}
.group-checkbox-pill.checked {
  background: rgba(0, 223, 143, 0.12);
  border-color: #00df8f;
  color: #00df8f;
  font-weight: 600;
}
.group-checkbox-pill input[type=checkbox] {
  accent-color: #00df8f;
  cursor: pointer;
}
.partner-search-wrapper {
  position: relative;
}
.partner-search-input {
  width: 100%;
  font-size: 0.8rem;
  padding-right: 5rem;
}
.partner-search-spinner {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: #00df8f;
}
.partner-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #0b1120;
  border: 1px solid rgba(0, 223, 143, 0.3);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.partner-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s ease;
}
.partner-search-item:last-child {
  border-bottom: none;
}
.partner-search-item:hover:not(.disabled) {
  background: rgba(0, 223, 143, 0.1);
}
.partner-search-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.search-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.search-item-name {
  font-size: 0.8rem;
  color: #f1f5f9;
}
.search-item-meta {
  font-size: 0.7rem;
  color: #94a3b8;
}
.btn-add-partner-chip {
  background: rgba(0, 223, 143, 0.15);
  color: #00df8f;
  border: 1px solid rgba(0, 223, 143, 0.3);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-add-partner-chip:hover:not(:disabled) {
  background: #00df8f;
  color: #000;
}
.btn-add-partner-chip:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
  border-color: transparent;
  cursor: not-allowed;
}
.selected-partners-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 38px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 0.5rem;
  align-items: center;
}
.no-partners-hint {
  font-size: 0.72rem;
  color: #64748b;
  font-style: italic;
}
.partner-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(0, 223, 143, 0.3);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.74rem;
  color: #e2e8f0;
}
.chip-avatar {
  font-size: 0.75rem;
}
.chip-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.chip-remove-btn {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.chip-remove-btn:hover {
  color: #f87171;
}

/* src/pages/Admin/AdminLogs.css */
.log-action-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--font-data);
  color: var(--color-info);
  background: var(--color-info-bg);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .admin-logs .admin-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .admin-logs .admin-search-wrap,
  .admin-logs .admin-search,
  .admin-logs .admin-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .admin-logs .admin-section-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .admin-logs .admin-table-wrap {
    display: none;
  }
  .log-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .log-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .log-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .log-card-date {
    font-size: 12px;
    font-family: var(--font-data, monospace);
    color: var(--color-text-secondary);
    font-weight: 500;
  }
  .log-card-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
  }
  .log-card-user-email {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 1px;
  }
  .log-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .log-card-resource,
  .log-card-ip {
    font-size: 11px;
    font-family: var(--font-data, monospace);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (min-width: 641px) {
  .log-card-list {
    display: none;
  }
}

/* src/pages/Admin/AdminCampaigns.css */
.admin-campaigns {
}
.campaigns-main-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}
.campaigns-main-tab {
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.campaigns-main-tab:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.14);
}
.campaigns-main-tab.active {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.3);
  color: var(--color-accent);
  font-weight: 600;
}
.camp-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.camp-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}
.camp-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.camp-topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.camp-cat-dropdown {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  transition: border-color 0.2s;
  color-scheme: dark;
}
.camp-cat-dropdown:focus {
  outline: none;
  border-color: var(--color-accent);
}
.camp-cat-dropdown option {
  background: #1a1a2e;
  color: var(--color-text);
}
.camp-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
  color-scheme: dark;
}
.camp-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.camp-textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.camp-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.camp-loading {
  color: var(--color-text-secondary);
  padding: 40px;
  text-align: center;
}
.camp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.camp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.18s;
}
.camp-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.camp-card-body {
  flex: 1;
  min-width: 0;
}
.camp-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.camp-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.camp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.camp-meta-item {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-data, monospace);
}
.camp-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .camp-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .camp-card-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .camp-card-actions > * {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
    justify-content: center;
  }
}
.wizard-footer-row {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.wizard-footer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media (max-width: 480px) {
  .wizard-footer-row {
    flex-direction: column;
    gap: 8px;
  }
  .wizard-footer-row > *,
  .wizard-footer-actions {
    width: 100%;
  }
  .wizard-footer-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
  }
  .wizard-footer-row > button,
  .wizard-footer-row > .btn {
    width: 100%;
  }
}
.camp-field-count {
  font-size: 12px;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 100px;
}
.camp-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-draft {
  color: #94A3B8;
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.2);
}
.badge-scheduled {
  color: #60A5FA;
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.25);
}
.badge-active {
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.3);
}
.badge-ended {
  color: #F87171;
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.25);
}
.badge-canceled {
  color: #6B7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.2);
}
.template-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tpl-field-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-weight: 500;
}
.tpl-field-more {
  color: var(--color-accent);
  border-color: rgba(74, 255, 197, 0.2);
  background: rgba(74, 255, 197, 0.06);
}
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.wizard-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.wizard-step.active .wizard-step-dot {
  border-color: var(--color-accent);
  background: rgba(74, 255, 197, 0.15);
  color: var(--color-accent);
}
.wizard-step.done .wizard-step-dot {
  border-color: rgba(74, 255, 197, 0.5);
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
}
.wizard-step-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: 8px;
  white-space: nowrap;
}
.wizard-step.active .wizard-step-label {
  color: var(--color-text);
  font-weight: 600;
}
.wizard-step.done .wizard-step-label {
  color: var(--color-text-secondary);
}
.wizard-step-line {
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 6px;
  flex-shrink: 0;
}
.wizard-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wizard-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  display: block;
}
.wizard-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.wizard-dynamic-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wizard-dynamic-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-preview {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
}
.template-preview-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.template-preview-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.template-preview-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tpf-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}
.tpf-type {
  font-size: 11px;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 6px;
}
.tpf-required {
  font-size: 10px;
  color: #F87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}
.user-search-results {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.user-search-empty {
  padding: 20px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.user-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s;
}
.user-search-row:last-child {
  border-bottom: none;
}
.user-search-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.user-search-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-search-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.user-search-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.user-search-code {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-data, monospace);
  background: rgba(74, 255, 197, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}
.user-search-razao {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-style: italic;
}
.user-search-email {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.7;
}
.user-search-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
  margin-bottom: 2px;
}
.user-search-row--first {
  border-left: 2px solid var(--color-accent);
  background: rgba(74, 255, 197, 0.04);
}
[data-theme=light] .user-search-row--first {
  border-left-color: #1A6BE8;
  background: rgba(26, 107, 232, 0.04);
}
.user-search-add {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(74, 255, 197, 0.3);
  background: rgba(74, 255, 197, 0.08);
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: inherit;
}
.user-search-add:hover {
  background: rgba(74, 255, 197, 0.15);
}
.user-search-add.added {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary);
}
.linked-users-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.linked-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: rgba(74, 255, 197, 0.08);
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.linked-chip-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.linked-chip-primary {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.linked-chip-sub {
  font-size: 10px;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.2;
}
.linked-user-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.15s;
}
.linked-user-chip button:hover {
  color: #EF4444;
}
.dates-preview {
  font-size: 13px;
  color: var(--color-text-secondary);
  background: rgba(74, 255, 197, 0.05);
  border: 1px solid rgba(74, 255, 197, 0.15);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.6;
}
.dates-preview strong {
  color: var(--color-text);
}
.confirm-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.confirm-row:last-child {
  border-bottom: none;
}
.confirm-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 100px;
  flex-shrink: 0;
  padding-top: 1px;
}
.confirm-val {
  font-size: 14px;
  color: var(--color-text);
  flex: 1;
  line-height: 1.5;
}
.confirm-divider {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 10px 16px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(74, 255, 197, 0.03);
}
.confirm-table {
  width: 100%;
  border-collapse: collapse;
}
.confirm-td-key {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  width: 40%;
  vertical-align: top;
}
.confirm-td-val {
  font-size: 14px;
  color: var(--color-text);
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  word-break: break-word;
}
.tpl-fields-empty {
  color: var(--color-text-secondary);
  font-size: 13px;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.tpl-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpl-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: border-color 0.18s;
}
.tpl-field-row:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.tpl-drag-handle {
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  opacity: 0.5;
}
.tpl-field-input {
  flex: 2;
  min-width: 0;
}
.tpl-field-type {
  flex: 1.4;
  min-width: 120px;
}
.tpl-required-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.tpl-required-check input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
}
.tpl-field-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.tpl-field-remove:hover {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
}
@media (max-width: 520px) {
  .tpl-field-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  .tpl-field-row .tpl-drag-handle {
    display: none;
  }
  .tpl-field-input {
    flex: 1 1 calc(100% - 44px);
    min-width: 0;
    order: 1;
  }
  .tpl-field-remove {
    order: 2;
    margin-left: auto;
    width: 32px;
    height: 32px;
    justify-content: center;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.18);
    font-size: 13px;
  }
  .tpl-field-type {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
  }
  .tpl-required-check {
    order: 4;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
  }
}
.camp-hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.6;
}
[data-theme=light] .campaigns-main-tab {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .campaigns-main-tab:hover {
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme=light] .campaigns-main-tab.active {
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.28);
  color: #1A6BE8;
}
[data-theme=light] .camp-topbar {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .camp-filter-label {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme=light] .camp-cat-dropdown {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  color-scheme: light;
}
[data-theme=light] .camp-cat-dropdown:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .camp-cat-dropdown option {
  background-color: #ffffff;
  color: #0F1923;
}
[data-theme=light] .camp-input,
[data-theme=light] .camp-textarea {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color-scheme: light;
}
[data-theme=light] .camp-input:focus,
[data-theme=light] .camp-textarea:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .camp-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .camp-card:hover {
  border-color: rgba(26, 107, 232, 0.25);
  box-shadow: 0 4px 16px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .camp-field-count {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .badge-active {
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.28);
}
[data-theme=light] .tpl-field-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .tpl-field-more {
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.22);
  background: rgba(26, 107, 232, 0.07);
}
[data-theme=light] .wizard-step-dot {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}
[data-theme=light] .wizard-step.active .wizard-step-dot {
  border-color: #1A6BE8;
  background: rgba(26, 107, 232, 0.12);
  color: #1A6BE8;
}
[data-theme=light] .wizard-step.done .wizard-step-dot {
  border-color: rgba(26, 107, 232, 0.45);
  background: rgba(26, 107, 232, 0.08);
  color: #1A6BE8;
}
[data-theme=light] .wizard-step-line {
  background: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .wizard-section-title {
  color: #1A6BE8;
}
[data-theme=light] .confirm-divider {
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .template-preview {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .template-preview-field {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .tpf-type {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme=light] .user-search-results {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .user-search-row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .user-search-row:hover {
  background: rgba(26, 107, 232, 0.03);
}
[data-theme=light] .user-search-add {
  border-color: rgba(26, 107, 232, 0.28);
  background: rgba(26, 107, 232, 0.08);
  color: #1A6BE8;
}
[data-theme=light] .user-search-add:hover {
  background: rgba(26, 107, 232, 0.14);
}
[data-theme=light] .linked-user-chip {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.20);
}
[data-theme=light] .dates-preview {
  background: rgba(26, 107, 232, 0.05);
  border-color: rgba(26, 107, 232, 0.15);
}
[data-theme=light] .confirm-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .confirm-row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .confirm-td-key,
[data-theme=light] .confirm-td-val {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .tpl-fields-empty {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .tpl-field-row {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .tpl-field-row:hover {
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .camp-hint {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.camp-preview-modal {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cpm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cpm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.cpm-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cpm-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  padding: 10px 16px 8px;
  background: rgba(74, 255, 197, 0.04);
  border-bottom: 1px solid rgba(74, 255, 197, 0.1);
}
.cpm-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cpm-row:last-child {
  border-bottom: none;
}
.cpm-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 2px;
}
.cpm-val {
  font-size: 14px;
  color: var(--color-text);
  flex: 1;
  line-height: 1.5;
}
.cpm-fields-table {
  width: 100%;
  border-collapse: collapse;
}
.cpm-ft-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  width: 38%;
  vertical-align: top;
}
.cpm-ft-val {
  font-size: 14px;
  color: var(--color-text);
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  word-break: break-word;
}
.cpm-fields-table tr:last-child .cpm-ft-key,
.cpm-fields-table tr:last-child .cpm-ft-val {
  border-bottom: none;
}
[data-theme=light] .cpm-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .cpm-section {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .cpm-section-title {
  background: rgba(26, 107, 232, 0.04);
  color: #1A6BE8;
  border-bottom-color: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .cpm-row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .cpm-ft-key,
[data-theme=light] .cpm-ft-val {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

/* src/pages/Admin/AdminBancos.css */
.banco-codigo {
  color: var(--color-success);
  font-weight: 700;
}
[data-theme=light] .banco-codigo {
  color: var(--color-accent);
}
.banco-nome {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
}
.banco-razao {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
[data-theme=light] .admin-table td .banco-nome,
[data-theme=light] .banco-nome {
  color: var(--color-text);
}
[data-theme=light] .admin-table td .banco-razao,
[data-theme=light] .banco-razao {
  color: var(--color-text-secondary);
}
[data-theme=light] .admin-cell-secondary {
  color: var(--color-text-secondary) !important;
}
.banco-finalidades-wrap {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.banco-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  user-select: none;
}
.banco-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-success);
  cursor: pointer;
}
[data-theme=light] .banco-checkbox {
  accent-color: var(--color-accent);
}

/* src/pages/Admin/AdminDigitacao.css */
.adig-product-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.adig-product-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface-2);
  border-bottom: none;
  cursor: pointer;
  transition: background 0.15s;
}
.adig-product-header:hover {
  background: var(--color-surface-3);
}
.adig-product-header--expanded {
  border-bottom: 1px solid var(--color-border);
}
.adig-product-info {
  flex: 1;
}
.adig-product-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.adig-product-name {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}
.adig-slug {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--color-success);
  background: var(--color-success-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-success);
}
[data-theme=light] .adig-slug {
  color: var(--color-accent);
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
}
.adig-product-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.adig-chevron {
  color: var(--color-text-secondary);
  transition: transform 0.2s;
  font-size: 12px;
}
.adig-chevron--open {
  transform: rotate(180deg);
}
.adig-tabelas-panel {
  padding: 1rem 1.25rem;
  background: var(--color-surface);
}
.adig-tabelas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.adig-tabelas-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adig-empty {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 1rem 0;
}
.adig-cell-code {
  color: var(--color-success);
  font-weight: 600;
}
[data-theme=light] .adig-cell-code {
  color: var(--color-accent);
}
.adig-prazo-ok {
  color: var(--color-success);
}
[data-theme=light] .adig-prazo-ok {
  color: var(--color-accent);
}
.adig-prazo-warn {
  color: var(--color-error);
  font-weight: 700;
}
.adig-cell-nome {
  font-weight: 500;
  color: var(--color-text);
}
.adig-row--warn td {
  background: var(--color-error-bg) !important;
}
.adig-label-hint {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}
.adig-toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
  flex-shrink: 0;
}
.adig-toggle-switch.on {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}
[data-theme=light] .adig-toggle-switch.on {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
}
.adig-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform 0.25s, background 0.25s;
}
.adig-toggle-switch.on .adig-toggle-thumb {
  transform: translateX(18px);
  background: var(--color-success);
}
[data-theme=light] .adig-toggle-switch.on .adig-toggle-thumb {
  background: var(--color-accent);
}
.adig-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.25rem;
}
.adig-tab-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.15s;
  border-bottom: 3px solid transparent;
}
.adig-tab-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}
.adig-tab-btn--active {
  color: var(--color-success) !important;
  border-bottom-color: var(--color-success);
  background: var(--color-surface-2);
}
[data-theme=light] .adig-tab-btn--active {
  color: var(--color-accent) !important;
  border-bottom-color: var(--color-accent);
}

/* src/pages/Campaigns/Campaigns.css */
.campaigns-page {
  padding: 0;
}
.campaigns-header {
  margin-bottom: 28px;
}
.campaigns-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.campaigns-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .campaigns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .campaigns-grid {
    grid-template-columns: 1fr;
  }
}
.campaigns-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  padding: 0;
}
.campaigns-card:hover {
  border-color: rgba(74, 255, 197, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.campaigns-card-banner {
  padding: 20px 20px 14px;
  position: relative;
}
.campaigns-card-banner-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.campaigns-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  flex: 1;
  line-height: 1.4;
}
.campaigns-card-category {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.campaigns-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.status-badge-ativa {
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.12);
  border-color: rgba(74, 255, 197, 0.3);
}
.status-badge-programada {
  color: #60A5FA;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.25);
}
.status-badge-encerrada {
  color: #F87171;
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.2);
}
.status-badge-cancelada {
  color: #6B7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.2);
}
.status-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4AFFC5;
  display: inline-block;
  animation: pulseDot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}
.campaigns-card-body {
  padding: 12px 20px;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.campaigns-card-table {
  width: 100%;
  border-collapse: collapse;
}
.cct-key {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 4px 8px 4px 0;
  width: 40%;
  vertical-align: top;
  line-height: 1.4;
}
.cct-val {
  font-size: 13px;
  color: var(--color-text);
  padding: 4px 0;
  vertical-align: top;
  line-height: 1.4;
  font-weight: 500;
}
.cct-more {
  font-size: 11px;
  color: var(--color-accent);
  padding: 6px 0 0;
  text-align: center;
  font-weight: 500;
}
.campaigns-card-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.campaigns-card-dates {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-data, monospace);
}
.campaigns-card-arrow {
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  transition: color 0.18s;
}
.campaigns-card:hover .campaigns-card-arrow {
  color: var(--color-accent);
}
.campaigns-grid-skeleton {
  pointer-events: none;
}
.campaigns-card-skeleton {
  height: 200px;
  border-radius: 16px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.03) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.campaign-modal-banner {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  border: 1px solid rgba(74, 255, 197, 0.25);
}
[data-theme=light] .campaign-modal-banner {
  border-color: rgba(26, 107, 232, 0.22);
}
.campaign-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  margin-bottom: 10px;
}
.campaign-status-dot.status-ativa {
  background: #4AFFC5;
  box-shadow: 0 0 8px rgba(74, 255, 197, 0.5);
  animation: pulseDot 2s infinite;
}
.campaign-status-dot.status-programada {
  background: #60A5FA;
}
.campaign-status-dot.status-encerrada {
  background: #F87171;
}
.campaign-status-dot.status-cancelada {
  background: #6B7280;
}
.campaign-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}
.campaign-modal-category {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.campaign-modal-dates {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  font-family: var(--font-data, monospace);
}
.date-sep {
  color: rgba(255, 255, 255, 0.2);
}
.campaign-modal-fields {
}
.campaign-fields-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.campaign-fields-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
}
.cft-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  width: 38%;
  background: rgba(255, 255, 255, 0.02);
  vertical-align: top;
}
.cft-val {
  font-size: 14px;
  color: var(--color-text);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
  line-height: 1.5;
}
[data-theme=light] .campaigns-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .campaigns-card:hover {
  border-color: rgba(26, 107, 232, 0.35);
  box-shadow: 0 8px 28px rgba(26, 107, 232, 0.13);
}
[data-theme=light] .campaigns-card-body {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .campaigns-card-footer {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .status-badge-ativa {
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.10);
  border-color: rgba(26, 107, 232, 0.28);
}
[data-theme=light] .status-pulse {
  background: #1A6BE8;
}
[data-theme=light] .campaign-status-dot.status-ativa {
  background: #1A6BE8;
  box-shadow: 0 0 8px rgba(26, 107, 232, 0.45);
}
[data-theme=light] .date-sep {
  color: rgba(0, 0, 0, 0.25);
}
[data-theme=light] .campaign-fields-table {
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .cft-key {
  background: rgba(26, 107, 232, 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}
[data-theme=light] .cft-val {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .campaigns-card-skeleton {
  background:
    linear-gradient(
      90deg,
      rgba(26, 107, 232, 0.04) 0%,
      rgba(26, 107, 232, 0.09) 50%,
      rgba(26, 107, 232, 0.04) 100%);
  border-color: rgba(26, 107, 232, 0.08);
}
[data-theme=light] .campaign-modal-banner {
  background: rgba(26, 107, 232, 0.05);
  border: 1px solid rgba(26, 107, 232, 0.12);
}
.campaigns-card-partners {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ccp-icon {
  font-size: 12px;
  opacity: 0.65;
  flex-shrink: 0;
}
.ccp-chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccp-chip--more {
  color: var(--color-accent);
  background: rgba(74, 255, 197, 0.07);
  border-color: rgba(74, 255, 197, 0.2);
}
.campaign-modal-partners {
  margin-top: 20px;
}
.cmp-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}
.cmp-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.cmp-code {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-data, monospace);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 6px;
}
[data-theme=light] .campaigns-card-partners {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .ccp-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .ccp-chip--more {
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .cmp-chip {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .cmp-code {
  background: rgba(0, 0, 0, 0.05);
}
.camp-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.camp-info-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  background: #111d18;
  border: 1px solid rgba(74, 255, 197, 0.22);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md, 12px);
  padding: 18px 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.camp-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(74, 255, 197, 0.18);
  background: #162a22;
  border-color: var(--color-accent);
}
.camp-card-column {
  display: flex;
  flex-direction: column;
  min-width: 100px;
  flex: 1 1 0%;
}
.camp-card-column:nth-child(2) {
  flex: 2 1 0%;
}
.camp-card-column-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 6px;
  opacity: 0.85;
}
.camp-card-column-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-primary);
  line-height: 1.35;
}
[data-theme=light] .camp-info-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(26, 107, 232, 0.22);
  border-left-color: #1A6BE8;
  box-shadow: 0 2px 14px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .camp-info-card:hover {
  background: rgba(240, 247, 255, 0.98);
  border-color: rgba(26, 107, 232, 0.38);
  box-shadow: 0 6px 24px rgba(26, 107, 232, 0.14);
}
[data-theme=light] .camp-card-column-label {
  color: #1A6BE8;
}
[data-theme=light] .camp-card-column-value {
  color: #0F1923;
}
@media (max-width: 600px) {
  .camp-info-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .camp-card-column {
    flex: none;
    width: 100%;
    min-width: unset;
    border-bottom: 1px solid rgba(74, 255, 197, 0.1);
    padding-bottom: 12px;
  }
  .camp-card-column:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  [data-theme=light] .camp-card-column {
    border-bottom-color: rgba(26, 107, 232, 0.09);
  }
}

/* src/pages/Settings/Settings.css */
.settings-page {
  padding: 24px;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.settings-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background:
    linear-gradient(
      90deg,
      var(--color-accent) 0%,
      #2DD4A0 100%);
}
.settings-card--tags::before {
  background:
    linear-gradient(
      90deg,
      #a78bfa 0%,
      #7c3aed 100%);
}
.settings-header {
  margin-bottom: 28px;
}
.settings-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tags-section-icon {
  font-size: 20px;
}
.settings-header p {
  font-size: 14px;
}
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
  line-height: 1;
}
.section-desc {
  font-size: 13px;
  margin-top: -8px;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}
.optin-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.optin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}
.optin-item:hover {
  border-color: var(--color-border-accent);
  background: var(--color-surface-3);
  transform: translateY(-2px);
}
.optin-item.active {
  border-color: rgba(74, 255, 197, 0.25);
  box-shadow: 0 0 15px rgba(74, 255, 197, 0.04);
}
.optin-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding-right: 20px;
}
.optin-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.optin-desc {
  font-size: 13px;
  line-height: 1.4;
}
.switch-wrapper {
  display: flex;
  align-items: center;
}
.custom-switch {
  width: 48px;
  height: 24px;
  border-radius: 12px;
  background: var(--color-surface-3);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--color-border);
}
.custom-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}
.custom-switch.on {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.custom-switch.on::after {
  left: calc(100% - 20px);
  background: var(--color-bg);
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}
.tags-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary, #8892a4);
  padding: 16px 0;
}
.tags-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  animation: tags-pulse 1.2s ease-in-out infinite;
}
.tags-loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.tags-loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes tags-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.tags-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 20px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  text-align: center;
  line-height: 1.6;
}
.tags-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.tags-table-header {
  display: grid;
  grid-template-columns: 1fr 90px 260px 90px;
  gap: 0;
  padding: 10px 16px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.tags-col {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.tags-row {
  display: grid;
  grid-template-columns: 1fr 90px 260px 90px;
  gap: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
  align-items: center;
}
.tags-row:last-child {
  border-bottom: none;
}
.tags-row:hover {
  background: var(--color-surface-2);
}
.tags-row--inativo {
  opacity: 0.45;
}
.tags-col--mensagem {
  font-size: 13px;
  color: var(--color-text);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  gap: 8px;
  flex-wrap: wrap;
}
.tags-msg-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 12px;
  color: var(--color-text-muted);
}
.tags-badge-inativo {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.tags-fonte-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  color: #60A5FA;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: none;
  font-family: monospace;
}
.tags-col--tag {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: normal;
  color: inherit;
}
.tags-tag-input {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.tags-tag-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}
.tags-tag-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tags-tag-input::placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
}
.tags-preview-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.tags-col--action {
  display: flex;
  justify-content: flex-end;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}
.tags-save-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 8px;
  color: #a78bfa;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.tags-save-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.45);
}
.tags-save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tags-save-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(167, 139, 250, 0.3);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: tags-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes tags-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .tags-table-header,
  .tags-row {
    grid-template-columns: 1fr 80px;
    grid-template-rows: auto auto;
  }
  .tags-col--fonte {
    display: none;
  }
  .tags-col--tag {
    grid-column: 1 / -1;
  }
  .tags-col--action {
    grid-row: 1;
    justify-content: flex-start;
  }
}
.settings-card--sounds::before {
  background:
    linear-gradient(
      90deg,
      #6366f1 0%,
      #a855f7 100%);
}
.sound-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sound-master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 20px;
  border-radius: 12px;
}
.sound-master-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sound-master-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #ffffff);
}
.sound-master-desc {
  font-size: 12px;
}
.sound-volume-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px 20px;
  border-radius: 12px;
}
.sound-volume-slider {
  width: 100%;
  accent-color: #6366f1;
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
}
.sound-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .sound-grid {
    grid-template-columns: 1fr;
  }
}
.sound-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.2s, border-color 0.2s;
}
.sound-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.sound-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sound-card-icon {
  font-size: 24px;
}
.sound-card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #ffffff);
}
.sound-card-sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.sound-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sound-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.sound-select {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sound-select:focus {
  border-color: #6366f1;
}
.sound-select option {
  background: #181b26;
  color: #ffffff;
}
.sound-upload-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed rgba(99, 102, 241, 0.3);
  padding: 12px;
  border-radius: 8px;
  align-items: flex-start;
}
.sound-upload-btn {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.sound-upload-btn:hover {
  background: rgba(99, 102, 241, 0.35);
  color: #ffffff;
}
.sound-filename {
  font-size: 11px;
  word-break: break-all;
}
.sound-test-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}
.sound-test-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
}
.sound-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.sound-save-btn {
  background:
    linear-gradient(
      135deg,
      #6366f1,
      #8b5cf6);
  border: none;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  transition: transform 0.15s, opacity 0.15s;
}
.sound-save-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* src/pages/Unsubscribe/Unsubscribe.css */
.unsub-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--color-bg);
  padding: 20px;
}
.unsub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.unsub-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.unsub-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.unsub-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.unsub-content p {
  font-size: 14px;
  line-height: 1.5;
}
.unsub-content p.small {
  font-size: 12px;
  margin-top: 8px;
}
.unsub-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(74, 255, 197, 0.1);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}
.unsub-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.unsub-icon.success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 2px solid rgba(74, 255, 197, 0.2);
  animation: mintPulse 2s infinite;
}
.unsub-icon.error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 2px solid rgba(255, 77, 109, 0.2);
}
.unsub-category-badge {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0;
}
.unsub-actions {
  margin-top: 16px;
  width: 100%;
}
.unsub-actions button {
  width: 100%;
}
.animate-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.unsub-resub-section {
  width: 100%;
  margin-top: 8px;
}
.unsub-resub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.unsub-resub-toggle:hover {
  border-color: rgba(74, 255, 197, 0.3);
  background: rgba(74, 255, 197, 0.04);
}
.unsub-resub-toggle.active {
  border-color: rgba(74, 255, 197, 0.4);
  background: rgba(74, 255, 197, 0.06);
}
.unsub-resub-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.unsub-resub-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.unsub-resub-toggle-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #8898a8);
}
.unsub-custom-switch {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}
.unsub-custom-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: transform 0.25s, background 0.25s;
}
.unsub-custom-switch.on {
  background: rgba(74, 255, 197, 0.25);
  border-color: rgba(74, 255, 197, 0.5);
}
.unsub-custom-switch.on::after {
  transform: translateX(18px);
  background: #4AFFC5;
}
.unsub-termo-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.unsub-termo-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 14px;
  text-align: left;
}
.unsub-termo-box p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: 8px;
}
.unsub-termo-box p:last-child {
  margin-bottom: 0;
}
.unsub-termo-date {
  color: rgba(255, 255, 255, 0.3) !important;
  font-family: monospace;
  font-size: 11px !important;
}
.unsub-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.unsub-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4AFFC5;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.unsub-resub-btn {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00D4A0);
  color: #0a1628;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.unsub-resub-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
}
.unsub-resub-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.unsub-resub-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  color: #4AFFC5;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
.unsub-resub-error {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  color: #FF4D6D;
  font-size: 12px;
}
.unsub-spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(10, 22, 40, 0.3);
  border-top-color: #0a1628;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* src/components/EmailBlockEditor/EmailBlockEditor.css */
.block-editor-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height) - 48px);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.editor-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: var(--color-surface);
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  gap: 24px;
}
.editor-inputs {
  display: flex;
  flex: 1;
  gap: 20px;
  align-items: flex-end;
}
.editor-inputs > div {
  flex: 1;
}
.editor-select {
  width: 100%;
  height: 40px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 0 12px;
  outline: none;
  transition: var(--transition);
}
.editor-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}
.editor-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 2px;
}
.editor-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.editor-panel {
  width: 280px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.editor-panel.settings {
  border-right: none;
  border-left: 1px solid var(--color-border);
  width: 330px;
}
.editor-panel h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.panel-subtitle {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
}
.toolbox-divider {
  border-top: 1px solid var(--color-border);
  margin: 14px 0;
}
.toolbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.toolbox-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.toolbox-btn:hover {
  background: var(--color-surface-3);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.toolbox-icon {
  font-size: 20px;
}
.editor-canvas {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  transition: background 0.3s ease;
}
.canvas-wrapper {
  width: 100%;
  max-width: 600px;
  background: #111111;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  height: fit-content;
}
.canvas-header {
  background: var(--color-surface-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.canvas-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.canvas-header .dot:nth-child(1) {
  background: #FF4D6D;
}
.canvas-header .dot:nth-child(2) {
  background: #FFB347;
}
.canvas-header .dot:nth-child(3) {
  background: #4AFFC5;
}
.canvas-title {
  margin-left: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.canvas-body-container {
  min-height: 400px;
  position: relative;
  background: #111111;
  transition: background 0.3s ease;
}
.empty-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  padding: 40px;
  text-align: center;
  color: var(--color-text-secondary);
}
.canvas-block {
  position: relative;
  padding: 8px;
  margin: 4px;
  border: 1px dashed transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.canvas-block:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.01);
}
.canvas-block.selected {
  border-color: var(--color-accent);
  background: rgba(74, 255, 197, 0.02);
  box-shadow: 0 0 10px rgba(74, 255, 197, 0.05);
}
.block-controls {
  position: absolute;
  top: -12px;
  right: 12px;
  display: none;
  background: var(--color-surface-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.canvas-block:hover .block-controls,
.canvas-block.selected .block-controls {
  display: flex;
}
.ctrl-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  width: 26px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
}
.ctrl-btn:last-child {
  border-right: none;
}
.ctrl-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-accent);
}
.ctrl-btn.delete:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.settings-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.label-hint {
  font-size: 10px;
  opacity: 0.6;
  font-weight: 400;
  margin-left: 4px;
}
.editor-textarea {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
  resize: vertical;
  transition: var(--transition);
}
.editor-textarea:focus {
  border-color: var(--color-accent);
}
.settings-divider {
  border-top: 1px solid var(--color-border);
  margin: 8px 0;
}
.align-buttons {
  display: flex;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.align-btn {
  flex: 1;
  background: none;
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  height: 36px;
  cursor: pointer;
  transition: var(--transition);
}
.align-btn:last-child {
  border-right: none;
}
.align-btn:hover {
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text);
}
.align-btn.active {
  background: var(--color-accent);
  color: var(--color-bg);
}
.variables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.var-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  padding: 8px 12px;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.var-btn:hover {
  border-color: var(--color-border-accent);
  color: var(--color-accent);
  background: var(--color-surface-3);
}
.var-group-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.var-group-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.var-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-text-secondary);
  opacity: 0.75;
}
.var-group-section .variables-grid {
  grid-template-columns: 1fr 1fr;
}
.var-group-section--accent {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-top: 4px;
}
.var-group-section--accent .var-group-title {
  color: var(--color-accent);
  opacity: 1;
}
.var-btn--accent {
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-2));
}
.var-btn--accent:hover {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface-2));
  border-color: var(--color-accent);
}
.color-picker-input {
  display: flex;
  align-items: center;
  gap: 12px;
}
.color-picker-input input[type=color] {
  -webkit-appearance: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
}
.color-picker-input input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-picker-input input[type=color]::-webkit-color-swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.color-picker-input span {
  font-size: 13px;
  font-family: monospace;
  color: var(--color-text-secondary);
}
.empty-settings {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.bg-type-tabs {
  display: flex;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  gap: 0;
}
.bg-type-tab {
  flex: 1;
  background: none;
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  white-space: nowrap;
}
.bg-type-tab:last-child {
  border-right: none;
}
.bg-type-tab:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
}
.bg-type-tab.active {
  background: var(--color-accent);
  color: #000;
}
.gradient-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gradient-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gradient-preview-strip {
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  margin-top: 4px;
  transition: background 0.3s ease;
}
.overlay-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 8px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.overlay-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}
.overlay-toggle input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.css-custom-textarea {
  font-family:
    "Courier New",
    Courier,
    monospace !important;
  font-size: 11px !important;
  line-height: 1.6;
  background: #0d0d0d !important;
  border-color: rgba(74, 255, 197, 0.15) !important;
  color: #4AFFC5 !important;
  resize: vertical;
}
.css-custom-textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 8px rgba(74, 255, 197, 0.08);
}
.global-styles-accordion {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 4px;
}
.global-styles-header {
  width: 100%;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  padding: 11px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.global-styles-header:hover {
  background: rgba(74, 255, 197, 0.04);
  color: var(--color-accent);
}
.global-styles-header.open {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}
.accordion-arrow {
  font-size: 10px;
  opacity: 0.6;
}
.global-styles-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.editor-mode-selector {
  display: flex;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
  margin-left: auto;
}
.mode-tab-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.mode-tab-btn:hover {
  color: var(--color-text);
}
.mode-tab-btn.active {
  background: var(--color-surface-3);
  color: var(--color-accent);
  border: 1px solid rgba(74, 255, 197, 0.2);
}
.html-editor-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
  background: #080808;
  gap: 20px;
  overflow-y: auto;
}
.html-editor-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.html-editor-info-card h4 {
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.html-editor-info-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.placeholders-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.placeholders-list code {
  background: var(--color-surface-2);
  color: var(--color-accent);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid rgba(74, 255, 197, 0.15);
  margin-right: 6px;
}
.placeholders-list span {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
}
.footer-warning-desc {
  font-size: 12px !important;
  color: #888888 !important;
  margin-bottom: 0 !important;
}
.raw-html-editor-textarea {
  width: 100%;
  flex: 1;
  min-height: 350px;
  background: #0f0f0f;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: #4AFFC5;
  font-family:
    "Courier New",
    Courier,
    monospace;
  font-size: 13px;
  padding: 16px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  tab-size: 2;
  transition: var(--transition);
}
.raw-html-editor-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(74, 255, 197, 0.05);
}
.code-font {
  font-family: monospace !important;
  font-size: 12px !important;
}
.format-buttons {
  display: flex;
  gap: 6px;
}
.format-btn {
  width: 38px;
  height: 36px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 15px;
  font-family: serif;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.format-btn:hover {
  background: var(--color-surface-3);
  border-color: var(--color-accent);
  color: var(--color-text);
}
.format-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}
.social-color-pickers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.social-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.social-color-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 90px;
}
.social-color-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
  text-align: center;
}
.split-workspace {
  display: flex !important;
  flex-direction: row !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.split-visual-side {
  display: flex;
  flex: 0 0 65%;
  min-width: 0;
  overflow: hidden;
}
.split-html-side {
  flex: 0 0 35%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-border, #222);
  background: #0e0e0e;
}
.split-html-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #161616;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}
.split-html-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary, #aaa);
  flex: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.split-html-edited-badge {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
}
.split-html-refresh-btn {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.split-html-refresh-btn:hover {
  background: rgba(74, 255, 197, 0.18);
  border-color: #4AFFC5;
}
.split-html-textarea {
  flex: 1;
  width: 100%;
  background: #0a0a0a;
  color: #c9d1d9;
  border: none;
  outline: none;
  resize: none;
  font-family:
    "Courier New",
    "Fira Code",
    monospace;
  font-size: 11px;
  line-height: 1.6;
  padding: 14px;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.split-visual-side .editor-canvas {
  flex: 1;
  min-width: 0;
}
.inline-formatting-toolbar {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 4px;
  display: flex;
  gap: 4px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  pointer-events: auto;
}
.format-btn {
  background: transparent;
  border: none;
  color: var(--color-text);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}
.format-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-accent);
}

/* src/pages/Admin/AdminAnnouncements.css */
.ann-adm-page {
  padding: 24px 0;
}
.ann-adm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ann-adm-subtabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 3px;
}
.ann-adm-subtab {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.ann-adm-subtab.active {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
.ann-adm-subtab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.75);
}
.ann-adm-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 20px;
}
.ann-adm-btn-new {
  background: var(--color-accent, #4AFFC5);
  color: #000;
  border: none;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.ann-adm-btn-new:hover {
  opacity: 0.85;
}
.ann-adm-btn-tmpl {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.ann-adm-btn-tmpl:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ann-adm-empty {
  text-align: center;
  padding: 48px 16px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}
.ann-adm-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ann-adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ann-adm-table th {
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.ann-adm-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.ann-adm-table tr:last-child td {
  border-bottom: none;
}
.ann-adm-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}
.ann-adm-td-title {
  font-weight: 500;
  color: #e2e8f0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-adm-td-muted {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}
.ann-adm-td-center {
  text-align: center;
}
.ann-adm-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ann-adm-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ann-adm-status--on {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.ann-adm-status--off {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}
.ann-adm-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ann-adm-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s;
}
.ann-adm-action:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ann-adm-action--del:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}
.ann-adm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ann-adm-modal {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  animation: ann-adm-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ann-adm-modal--sm {
  max-width: 420px;
}
@keyframes ann-adm-pop {
  from {
    transform: scale(0.95) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.ann-adm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.ann-adm-modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.ann-adm-modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ann-adm-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.ann-adm-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.ann-adm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.ann-adm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 700px) {
  .ann-adm-two-col {
    grid-template-columns: 1fr;
  }
}
.ann-adm-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ann-adm-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ann-adm-input,
.ann-adm-select,
.ann-adm-textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 9px 12px;
  color: #e2e8f0;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: inherit;
}
.ann-adm-input:focus,
.ann-adm-select:focus,
.ann-adm-textarea:focus {
  outline: none;
  border-color: #0ea5e9;
}
.ann-adm-textarea {
  resize: vertical;
  min-height: 80px;
}
.ann-adm-textarea--code {
  font-family:
    "Fira Code",
    "Cascadia Code",
    "Courier New",
    monospace;
  font-size: 12px;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(168, 85, 247, 0.3);
}
.ann-adm-textarea--code:focus {
  border-color: #a855f7;
}
.ann-adm-html-hint {
  font-size: 11px;
  color: rgba(168, 85, 247, 0.7);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 2px;
}
.ann-adm-row {
  display: flex;
  gap: 12px;
}
.ann-adm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.ann-adm-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #0ea5e9;
  cursor: pointer;
}
.ann-adm-error {
  color: #f87171;
  font-size: 12px;
  margin: 0;
}
.ann-adm-img-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ann-adm-label-txt {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.ann-adm-img-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ann-adm-img-sep {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.ann-adm-btn-upload {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.ann-adm-btn-upload:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ann-adm-img-thumb-wrap {
  position: relative;
  display: inline-block;
}
.ann-adm-img-thumb {
  max-width: 220px;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}
.ann-adm-img-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ann-adm-preview-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
}
.ann-adm-preview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}
.ann-adm-preview-modal {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--ann-color, #0ea5e9) inset;
}
.ann-adm-preview-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ann-adm-preview-img-wrap {
  width: 100%;
  background: #050a10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ann-adm-preview-img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 200px !important;
  object-fit: contain !important;
  object-position: center;
}
.ann-adm-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  padding: 12px 14px 4px;
}
.ann-adm-preview-body {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  padding: 0 14px 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ann-adm-preview-html {
  white-space: normal;
}
.ann-adm-preview-html p {
  margin: 0 0 4px;
}
.ann-adm-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ann-adm-preview-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: default;
}
.ann-adm-preview-btn-primary {
  border: none;
  color: #000;
  font-weight: 700;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: default;
}
.ann-adm-btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  border-radius: 9px;
  padding: 9px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.ann-adm-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
.ann-adm-btn-save {
  background: var(--color-accent, #4AFFC5);
  border: none;
  color: #000;
  border-radius: 9px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.ann-adm-btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ann-adm-btn-save:hover:not(:disabled) {
  opacity: 0.85;
}
.ann-adm-pick-list {
  display: flex;
  flex-direction: column;
}
.ann-adm-pick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  color: inherit;
  width: 100%;
}
.ann-adm-pick-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.ann-adm-pick-item:last-child {
  border-bottom: none;
}
.ann-adm-pick-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ann-adm-pick-info strong {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}
.ann-adm-pick-info span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.ann-adm-pick-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
}
@media (max-width: 600px) {
  .ann-adm-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .ann-adm-modal {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width: 100%;
    max-height: 92dvh;
    overflow-x: hidden;
    animation: ann-adm-slide-up 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  @keyframes ann-adm-slide-up {
    from {
      transform: translateY(60px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .ann-adm-modal--sm {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }
  .ann-adm-modal-header {
    padding: 16px 18px 14px;
  }
  .ann-adm-modal-header h2 {
    font-size: 15px;
  }
  .ann-adm-modal-body {
    padding: 16px 18px;
    overflow-x: hidden;
  }
  .ann-adm-two-col {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ann-adm-row {
    flex-direction: column;
    gap: 14px;
  }
  .ann-adm-row .ann-adm-label {
    flex: unset !important;
    width: 100%;
  }
  .ann-adm-input,
  .ann-adm-select,
  .ann-adm-textarea {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  input[type=datetime-local].ann-adm-input {
    min-width: 0;
    font-size: 12px;
  }
  .ann-adm-modal-footer {
    flex-direction: column-reverse;
    padding: 14px 18px;
    gap: 8px;
  }
  .ann-adm-btn-save,
  .ann-adm-btn-cancel {
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
  }
  .ann-adm-preview-col {
    position: static;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 16px;
  }
  .ann-adm-header {
    gap: 10px;
  }
  .ann-adm-subtabs {
    flex: 1;
  }
  .ann-adm-btn-new {
    width: 100%;
    text-align: center;
  }
  .ann-adm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ann-adm-img-row {
    flex-wrap: wrap;
  }
  .ann-adm-img-row .ann-adm-input {
    flex: 1;
    min-width: 0;
  }
  .ann-adm-img-thumb {
    max-width: 160px;
    max-height: 100px;
  }
}

/* src/components/NotificationCalendar/NotificationCalendar.css */
.notif-calendar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 700px;
  background: var(--color-bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  font-family: "Inter", sans-serif;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--color-border);
}
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.calendar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  min-width: 200px;
  text-transform: capitalize;
}
.calendar-view-selector {
  background: var(--color-bg-primary);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--color-border);
}
.view-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.view-btn.active {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  flex: 1;
}
.day-header {
  height: 42px;
  padding: 12px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-day {
  min-height: 120px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 8px;
  transition: background 0.2s ease;
  cursor: pointer;
}
.calendar-day:hover {
  background: rgba(255, 255, 255, 0.02);
}
.calendar-day:nth-child(7n) {
  border-right: none;
}
.calendar-day.other-month {
  background: rgba(0, 0, 0, 0.1);
}
.calendar-day.today {
  background: rgba(var(--color-accent-rgb), 0.05);
}
.day-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
}
.today .day-number {
  background: var(--color-accent);
  color: white;
}
.calendar-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.calendar-time-grid {
  display: flex;
  flex: 1;
  overflow-y: auto;
  position: relative;
  background: #0d0d0d;
  min-height: 0;
  height: 100%;
}
.calendar-time-grid::-webkit-scrollbar {
  width: 8px;
}
.calendar-time-grid::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
.time-sidebar {
  width: 70px;
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.01);
}
.sidebar-header-spacer {
  height: 42px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 101;
}
.time-slot-label {
  height: 40px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: right;
  padding-right: 8px;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  justify-content: flex-end;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.is-zoomed .time-slot-label {
  height: 120px;
  font-size: 0.75rem;
  padding-top: 6px;
}
.grid-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 960px;
}
.is-zoomed .grid-content {
  min-height: 2880px;
}
.grid-layers-container {
  position: relative;
  width: 100%;
  flex: 1;
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  flex-direction: column;
  min-height: 960px;
}
.is-zoomed .grid-layers-container {
  min-height: 2880px;
}
.grid-background-layer,
.grid-events-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}
.grid-events-layer {
  pointer-events: auto;
}
.grid-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}
.grid-background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  pointer-events: none;
}
.grid-background-column {
  flex: 1;
  min-width: 120px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.grid-hour-divider {
  height: 40px;
  min-height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}
.is-zoomed .grid-hour-divider {
  height: 120px;
  min-height: 120px;
}
.grid-header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  background: #0a0a0a;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
}
.grid-day-header {
  flex: 1;
  min-width: 120px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
}
.calendar-body[data-view=day] .grid-day-header {
  border-right: none;
}
.grid-events-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  z-index: 2;
}
.grid-column {
  flex: 1;
  min-width: 120px;
  position: relative;
  height: 100%;
}
.grid-hour-slot {
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.is-zoomed .grid-hour-slot {
  height: 120px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background-image:
    linear-gradient(
      to bottom,
      transparent 29px,
      rgba(255, 255, 255, 0.05) 30px,
      transparent 59px,
      rgba(255, 255, 255, 0.08) 60px,
      transparent 89px,
      rgba(255, 255, 255, 0.05) 90px,
      transparent 119px);
  background-size: 100% 120px;
}
.grid-events-layer > div {
  pointer-events: auto;
}
.calendar-month-event {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-month-event.event-Push {
  background-color: #ffab00 !important;
  color: #1a1a1a !important;
}
.calendar-month-event.event-Email {
  background-color: #0052cc !important;
  color: #ffffff !important;
}
.calendar-month-event.event-Comunicado,
.calendar-month-event.event-An\fancio {
  background-color: #6554c0 !important;
  color: #ffffff !important;
}
.calendar-marker {
  position: absolute;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: white;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 4px solid transparent;
  min-height: 24px;
  max-width: calc(100% - 4px);
  margin-left: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 20;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  background: #1e293b;
}
.is-zoomed-card {
  left: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-height: 38px;
}
.marker-start.event-Push {
  background: #ffab00;
  border-left-color: #e69900;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.event-Email {
  background: #0052cc;
  border-left-color: #0041a3;
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.event-Comunicado,
.event-An\fancio {
  background: #6554c0;
  border-left-color: #5142a1;
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.zoom-out-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  margin: 0 auto;
}

/* src/pages/Admin/EmailInbox/EmailInboxTab.css */
.inbox-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.inbox-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.inbox-kpi-card {
  background: var(--color-bg-card, #14171d);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.inbox-kpi-card:hover {
  border-color: rgba(0, 229, 255, 0.3);
  transform: translateY(-2px);
}
.inbox-kpi-card.active {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.06);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.12);
}
.inbox-kpi-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.inbox-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary, #fff);
  line-height: 1.2;
}
.inbox-kpi-lbl {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  font-weight: 500;
}
.inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-bg-card, #14171d);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 12px 16px;
}
.inbox-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 280px;
}
.inbox-search-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text-primary, #fff);
  outline: none;
  transition: border-color 0.2s;
}
.inbox-search-input:focus {
  border-color: #00e5ff;
}
.inbox-filter-select {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text-primary, #fff);
  outline: none;
}
.inbox-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inbox-btn-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 229, 255, 0.12);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.inbox-btn-sync:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.2);
  border-color: #00e5ff;
}
.inbox-btn-sync:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.inbox-split-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
  min-height: 600px;
  height: calc(100vh - 280px);
}
@media (max-width: 1024px) {
  .inbox-split-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}
.inbox-list-pane {
  background: var(--color-bg-card, #14171d);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-list-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  font-weight: 600;
}
.inbox-list-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.inbox-item-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.04));
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbox-item-card:hover {
  background: rgba(255, 255, 255, 0.03);
}
.inbox-item-card.selected {
  background: rgba(0, 229, 255, 0.08);
  border-left: 3px solid #00e5ff;
}
.inbox-item-card.unread {
  background: rgba(0, 229, 255, 0.03);
}
.inbox-item-card.unread .inbox-item-subject {
  font-weight: 700;
  color: #fff;
}
.inbox-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inbox-sender-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.inbox-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 8px #00e5ff;
  flex-shrink: 0;
}
.inbox-sender-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  flex-shrink: 0;
}
.inbox-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-item-date {
  font-size: 11px;
  color: var(--color-text-secondary, #64748b);
  white-space: nowrap;
  flex-shrink: 0;
}
.inbox-item-subject {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary, #cbd5e1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-item-snippet {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.inbox-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.inbox-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.inbox-pill-user {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.inbox-pill-response {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.inbox-pill-ticket {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.inbox-pill-att {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.inbox-pagination {
  padding: 10px 14px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
}
.inbox-page-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  color: #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.inbox-page-btn:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00e5ff;
}
.inbox-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.inbox-detail-pane {
  background: var(--color-bg-card, #14171d);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-secondary, #64748b);
  gap: 12px;
  text-align: center;
  padding: 40px;
}
.inbox-detail-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}
.inbox-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  background: rgba(0, 0, 0, 0.15);
}
.inbox-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.inbox-btn-reply {
  background: #00e5ff;
  color: #0b0f19;
  border-color: #00e5ff;
}
.inbox-btn-reply:hover {
  background: #33ebff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.inbox-btn-ticket {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.inbox-btn-ticket:hover {
  background: rgba(16, 185, 129, 0.25);
}
.inbox-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary, #94a3b8);
  border-color: rgba(255, 255, 255, 0.1);
}
.inbox-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.inbox-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inbox-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #fff);
  line-height: 1.4;
}
.inbox-detail-meta-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.inbox-meta-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.inbox-meta-label {
  width: 50px;
  color: var(--color-text-secondary, #64748b);
  font-weight: 600;
  flex-shrink: 0;
}
.inbox-meta-value {
  color: var(--color-text-primary, #cbd5e1);
  word-break: break-all;
}
.inbox-context-banner {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-context-user {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}
.inbox-context-campaign {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}
.inbox-context-ticket {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
.inbox-view-toggle {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}
.inbox-view-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
}
.inbox-view-btn.active {
  background: rgba(0, 229, 255, 0.12);
  color: #00e5ff;
}
.inbox-body-html-box {
  background: #ffffff;
  color: #1a202c;
  padding: 20px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.inbox-body-text-box {
  background: rgba(0, 0, 0, 0.2);
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}
.inbox-attachments-box {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inbox-attachments-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}
.inbox-attachment-name {
  color: #00e5ff;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-attachment-name:hover {
  text-decoration: underline;
}
.inbox-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.inbox-modal-card {
  background: var(--color-bg-card, #14171d);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  width: 100%;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: fadeIn 0.2s ease-out;
}
.inbox-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inbox-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-modal-close {
  background: none;
  border: none;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 18px;
  cursor: pointer;
}
.inbox-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inbox-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbox-modal-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
}
.inbox-modal-textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: #fff;
  outline: none;
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}
.inbox-modal-textarea:focus {
  border-color: #00e5ff;
}
.inbox-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(0, 0, 0, 0.1);
}

/* src/pages/Admin/AdminEmailMarketing.css */
.admin-email-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.trx-card {
  background: var(--color-surface-2);
  border: 1px solid color-mix(in srgb, var(--trx-color, var(--color-accent)) 30%, transparent);
  border-radius: 14px;
  overflow: hidden;
}
.trx-card-header {
  background: color-mix(in srgb, var(--trx-color, var(--color-accent)) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--trx-color, var(--color-accent)) 20%, transparent);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.trx-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trx-card-icon {
  font-size: 24px;
}
.trx-card-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: 15px;
}
.trx-card-desc {
  color: var(--color-text-secondary);
  font-size: 12px;
  margin-top: 2px;
}
.trx-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trx-vars-panel {
  padding: 16px 24px;
}
.trx-vars-label {
  color: var(--color-text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 10px;
}
.trx-vars-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trx-var-tag {
  background: color-mix(in srgb, var(--trx-color, var(--color-accent)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--trx-color, var(--color-accent)) 25%, transparent);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trx-var-name {
  color: var(--trx-color, var(--color-accent));
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}
.trx-var-desc {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.trx-var-group {
  margin-bottom: 8px;
}
.trx-var-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trx-var-group-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  opacity: 0.7;
}
.trx-var-group--collapsible {
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}
.trx-var-group--collapsible summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  transition: color 0.15s;
}
.trx-var-group--collapsible summary:hover .trx-var-group-label,
.trx-var-group--collapsible summary:hover {
  color: var(--color-text);
}
.trx-var-group--collapsible summary::marker {
  display: none;
}
.trx-var-group--collapsible summary::-webkit-details-marker {
  display: none;
}
.trx-var-group--collapsible .trx-var-group-label::before {
  content: "\25b6";
  font-size: 8px;
  opacity: 0.5;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.trx-var-group--collapsible[open] .trx-var-group-label::before {
  transform: rotate(90deg);
}
.trx-var-group--collapsible .trx-vars-list {
  margin-top: 8px;
  padding-bottom: 8px;
}
.trx-var-tag--action {
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--trx-color, var(--color-accent)) 45%, transparent);
  background: color-mix(in srgb, var(--trx-color, var(--color-accent)) 14%, transparent);
}
[data-theme=light] .trx-card {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--trx-color, var(--color-accent)) 18%, #e2e8f0);
}
[data-theme=light] .trx-card-header {
  background: color-mix(in srgb, var(--trx-color, var(--color-accent)) 5%, #f8fafc);
  border-bottom-color: color-mix(in srgb, var(--trx-color, var(--color-accent)) 12%, #e2e8f0);
}
[data-theme=light] .trx-var-tag {
  background: color-mix(in srgb, var(--trx-color, var(--color-accent)) 5%, #f1f5f9);
  border-color: color-mix(in srgb, var(--trx-color, var(--color-accent)) 18%, #cbd5e1);
}
[data-theme=light] .trx-var-name {
  filter: brightness(0.75) saturate(1.2);
}
.page-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.page-header-actions > div:first-child {
  flex: 1 1 0;
  min-width: 0;
}
.page-header-actions h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.header-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  align-items: center;
  padding-top: 2px;
}
.email-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.email-tab-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.email-tab-btn:hover {
  color: var(--color-text);
}
.email-tab-btn.active {
  color: var(--color-accent);
  font-weight: 600;
}
.email-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
}
.email-tabs-action {
  margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
@media (max-width: 992px) {
  .email-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 12px;
  }
  .email-tabs-scroll {
    width: 100%;
  }
  .email-tabs-action {
    margin-left: 0;
    padding-left: 0;
    justify-content: flex-end;
  }
}
.notif-accordion {
  display: none;
}
.notif-desktop-tabs {
  display: flex;
}
.notif-desktop-content {
  display: block;
}
@media (max-width: 768px) {
  .notif-desktop-tabs {
    display: none !important;
  }
  .notif-desktop-content {
    display: none !important;
  }
  .notif-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
  }
  .notif-accordion-item {
    border-bottom: 1px solid var(--color-border);
  }
  .notif-accordion-item:last-child {
    border-bottom: none;
  }
  .notif-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    transition: background 0.18s;
  }
  .notif-accordion-header:hover {
    background: rgba(255, 255, 255, 0.03);
  }
  .notif-accordion-item.open .notif-accordion-header {
    background: rgba(74, 255, 197, 0.06);
    color: var(--color-accent);
    border-bottom: 1px solid rgba(74, 255, 197, 0.15);
  }
  .notif-accordion-icon {
    font-size: 18px;
    flex-shrink: 0;
  }
  .notif-accordion-label {
    flex: 1;
    min-width: 0;
  }
  .notif-accordion-action {
    flex-shrink: 0;
  }
  .notif-accordion-chevron {
    font-size: 10px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .notif-accordion-item.open .notif-accordion-chevron {
    color: var(--color-accent);
  }
  .notif-accordion-body {
    border-top: none;
  }
  .notif-accordion-item.open .tab-content-card,
  .notif-accordion-item.open + .notif-section-content {
    display: block;
  }
  .admin-email-page {
    gap: 0;
  }
  .admin-email-page .page-header-actions {
    margin-bottom: 16px;
  }
}
[data-theme=light] .notif-accordion {
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .notif-accordion-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .notif-accordion-header {
  background: #ffffff;
}
[data-theme=light] .notif-accordion-header:hover {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .notif-accordion-item.open .notif-accordion-header {
  background: rgba(26, 107, 232, 0.05);
  color: #1A6BE8;
  border-bottom-color: rgba(26, 107, 232, 0.12);
}
[data-theme=light] .notif-accordion-item.open .notif-accordion-chevron {
  color: #1A6BE8;
}
.tab-content-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  min-height: 200px;
}
.tab-loading-spinner {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-loading-spinner::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid rgba(74, 255, 197, 0.1);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-table th {
  padding: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.admin-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}
.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.01);
}
.font-bold {
  font-weight: 600;
}
.table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.log-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-user-name {
  font-weight: 600;
  color: var(--color-text);
}
.log-user-email {
  color: var(--color-text-secondary);
}
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.pagination-info {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.rule-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 450px;
  max-width: 600px;
}
@media (max-width: 600px) {
  .rule-form {
    min-width: 100%;
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-desc {
  font-size: 11px;
  margin-top: -4px;
  line-height: 1.4;
}
.groups-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 16px;
  border-radius: var(--radius-md);
  max-height: 150px;
  overflow-y: auto;
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
.checklist-item input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.form-row-switches {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: flex-end;
}
.active-toggle-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4px;
}
.checkbox-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.checkbox-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-border);
  transition: .3s;
  border-radius: 34px;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
.checkbox-switch input:checked + .switch-slider {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.checkbox-switch input:checked + .switch-slider:before {
  transform: translateX(22px);
  background-color: var(--color-bg);
}
.modal-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.fullscreen-editor {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 200;
  padding: 24px;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.25s ease-out;
}
.push-device-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.push-device-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
}
.push-device-status--active {
  color: #4AFFC5;
}
.push-device-status--inactive {
  color: var(--color-text-secondary);
}
.push-device-sub-btn {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.push-device-sub-btn:hover {
  opacity: 0.88;
}
.push-device-sub-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.push-device-unsub-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.push-device-unsub-btn:hover {
  border-color: #f87171;
  color: #f87171;
}
.push-device-unsub-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.group-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 14px;
  border-radius: var(--radius-md);
  max-height: 160px;
  overflow-y: auto;
}
.group-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
}
.group-checkbox-item input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.form-textarea {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-input {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  padding: 9px 14px;
  font-size: 14px;
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.push-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.push-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  flex: 1;
  min-width: 140px;
  transition: border-color 0.2s;
}
.push-stat-card--active {
  border-color: rgba(74, 255, 197, 0.35);
}
.push-stat-card--coverage {
  border-color: rgba(147, 112, 255, 0.35);
}
.push-stat-icon {
  font-size: 22px;
}
.push-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.push-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.push-stat-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.push-subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.push-subtab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.push-subtab-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
}
.push-subtab-btn.active {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
  font-weight: 600;
}
.push-subtab-count {
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.push-subtab-btn.active .push-subtab-count {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}
.push-filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.push-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.push-clear-filter-btn {
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: transparent;
  color: #f87171;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s;
  align-self: flex-end;
}
.push-clear-filter-btn:hover {
  background: rgba(248, 113, 113, 0.1);
}
.push-img-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.push-img-toggle-btn {
  padding: 3px 10px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.push-img-toggle-btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}
.push-img-toggle-btn.active {
  background: var(--color-accent);
  color: #000;
  font-weight: 700;
}
.push-img-upload-area {
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  transition: border-color 0.18s;
}
.push-img-upload-area:hover {
  border-color: var(--color-accent);
}
.push-img-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-align: center;
  line-height: 1.3;
}
.push-img-filename {
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.push-img-clear-btn {
  display: block;
  width: 100%;
  padding: 5px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  color: #f87171;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0 0 7px 7px;
}
.push-img-clear-btn:hover {
  background: rgba(248, 113, 113, 0.08);
}
.admin-table td .btn-sm {
  min-width: 32px;
  padding: 4px 6px;
}
.push-deliver-count {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.push-action-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
.push-action-row .btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 10px;
}
.trx-preview-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
}
.trx-preview-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-surface-2, #1a1d23);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  font-size: 13px;
}
.trx-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.trx-preview-dot.active {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e88;
}
.trx-preview-dot.inactive {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b88;
}
.trx-preview-area {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #1a1a1a;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.trx-preview-area.is-web {
  padding: 0;
}
.trx-preview-area.is-web .trx-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.trx-preview-area.is-mobile {
  padding: 24px 0 32px;
  background: #111;
}
.trx-preview-area.is-mobile .trx-preview-iframe {
  width: 390px;
  height: 844px;
  border: none;
  border-radius: 40px;
  box-shadow:
    0 0 0 10px #1c1c1e,
    0 0 0 12px #333,
    0 30px 60px rgba(0, 0, 0, 0.7);
  display: block;
  overflow: hidden;
}
.trx-preview-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 14px;
  min-height: 300px;
  width: 100%;
}
.trx-preview-default {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 32px;
  text-align: center;
  width: 100%;
}
.trx-preview-default-icon {
  font-size: 48px;
  line-height: 1;
}
.trx-preview-default-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.trx-preview-default-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 400px;
}
.trx-viewport-toggle {
  display: flex;
  background: var(--color-surface-2, #1a1d23);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.trx-vp-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.trx-vp-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}
.trx-vp-btn.active {
  background: var(--color-primary, #4AFFC5);
  color: #000;
}
.trx-preview-modal .modal-body {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trx-preview-modal .modal-card {
  height: 90vh;
}
.trx-preview-modal .modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--color-border);
}
.trx-preview-modal {
  height: 90vh !important;
  display: flex;
  flex-direction: column;
}
.trx-preview-modal .modal-body {
  padding: 0 !important;
  overflow: hidden !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.trx-preview-modal .modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.trx-preview-modal .trx-preview-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.trx-preview-modal .trx-preview-status {
  flex-shrink: 0;
}
.trx-preview-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  background: #1a1a1a;
}
.trx-preview-area.is-web {
  padding: 0;
  align-items: stretch;
}
.trx-preview-area.is-web .trx-preview-iframe {
  width: 100%;
  flex: 1;
  border: none;
  display: block;
  min-height: 400px;
}
.trx-preview-area.is-mobile {
  padding: 24px 0 32px;
  background: #111;
  align-items: flex-start;
  justify-content: center;
}
.trx-preview-area.is-mobile .trx-preview-iframe {
  width: 390px;
  height: 844px;
  flex-shrink: 0;
  border: none;
  border-radius: 40px;
  box-shadow:
    0 0 0 10px #1c1c1e,
    0 0 0 12px #333,
    0 30px 60px rgba(0, 0, 0, 0.7);
  display: block;
}
.trx-preview-loading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.trx-preview-modal .trx-preview-default {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 32px;
  text-align: center;
  width: 100%;
}
.trx-preview-default-icon {
  font-size: 48px;
  line-height: 1;
}
.trx-preview-default-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.trx-preview-default-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 400px;
}
.trx-viewport-toggle {
  display: flex;
  background: var(--color-surface-2, #1a1d23);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.trx-vp-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.trx-vp-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}
.trx-vp-btn.active {
  background: var(--color-primary, #4AFFC5);
  color: #000;
}
.email-tabs-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex-grow: 1;
  min-width: 0;
  scrollbar-width: none;
}
.email-tabs-scroll::-webkit-scrollbar {
  display: none;
}
@media (max-width: 992px) {
  .templates-workspace-layout {
    flex-direction: column !important;
  }
  .categories-sidebar {
    width: 100% !important;
  }
}

/* src/pages/Admin/AdminTickets.css */
.at-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.at-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.at-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
  position: relative;
}
.at-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text, #e2e8f0);
}
.at-tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text, #e2e8f0);
  font-weight: 600;
}
.at-badge-count {
  background: #FF4D6D;
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
}
.at-total-label {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  margin-top: 2px;
}
.at-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.at-layout-split {
  flex-direction: row;
  align-items: flex-start;
}
.at-table-wrap {
  flex: 1;
  min-width: 0;
}
.at-row {
  cursor: pointer;
  transition: background 0.15s;
}
.at-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.at-row-selected {
  background: rgba(0, 198, 167, 0.06) !important;
  border-left: 2px solid #00C6A7;
}
.at-row-open {
}
.at-row-inactive {
  opacity: 0.5;
}
.at-ticket-num {
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: var(--color-primary, #00C6A7);
  font-weight: 600;
}
.at-reason-tag {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 2px 8px;
  display: inline-block;
}
.at-detail {
  width: 340px;
  flex-shrink: 0;
  background: var(--color-surface, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  position: sticky;
  top: 16px;
}
.at-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.at-detail-num {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary, #00C6A7);
}
.at-detail-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 12px;
  transition: background 0.2s;
}
.at-detail-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.at-detail-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.at-detail-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.at-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}
.at-detail-row span {
  color: var(--color-text-secondary, #94a3b8);
  min-width: 56px;
}
.at-detail-row strong {
  color: var(--color-text, #e2e8f0);
  text-align: right;
  word-break: break-word;
}
.at-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #60a5fa;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
  transition: opacity 0.2s;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.at-contact-email:hover {
  opacity: 0.75;
  text-decoration: underline;
}
.at-contact-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #25D366;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  transition: opacity 0.2s;
}
.at-contact-whatsapp:hover {
  opacity: 0.75;
}
.at-contact-bar {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.at-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.at-channel-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}
.at-channel-email {
  background: rgba(99, 102, 241, 0.14);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
}
.at-channel-chat {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.at-channel-compliance {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.at-channel-whatsapp {
  background: rgba(37, 211, 102, 0.14);
  color: #4ade80;
  border: 1px solid rgba(37, 211, 102, 0.35);
}
.at-channel-other {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.at-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.at-user-registered {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.at-user-unregistered {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.at-channel-banner {
  margin: 12px 16px;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  transition: all 0.2s ease;
}
.at-channel-banner.at-channel-email {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
}
.at-channel-banner.at-channel-chat {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #a7f3d0;
}
.at-channel-banner.at-channel-compliance {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fde68a;
}
.at-channel-banner.at-channel-whatsapp {
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
  color: #bbf7d0;
}
.at-channel-banner.at-channel-other {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
}
.at-channel-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.at-channel-banner-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.at-channel-banner-text {
  flex: 1;
  min-width: 0;
}
.at-channel-banner-title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
}
.at-channel-banner-title strong {
  font-weight: 700;
  letter-spacing: 0.2px;
}
.at-channel-banner-desc {
  font-size: 11.5px;
  opacity: 0.88;
}
.at-channel-banner-tip {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  opacity: 0.95;
  border-left: 3px solid currentColor;
}
.at-email-notice {
  margin: 12px 16px;
  padding: 10px 14px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  font-size: 12px;
  color: #a5b4fc;
  line-height: 1.4;
}
.at-open-floating-chat-btn {
  width: 100%;
  padding: 10px 14px;
  background:
    linear-gradient(
      135deg,
      #10b981,
      #059669);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.at-open-floating-chat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.at-contact-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.01em;
}
.at-contact-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.at-contact-btn:active {
  transform: translateY(0);
}
.at-contact-btn-email {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #60a5fa;
}
.at-contact-btn-email:hover {
  background: rgba(96, 165, 250, 0.18);
}
.at-contact-btn-whatsapp {
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.25);
  color: #25D366;
}
.at-contact-btn-whatsapp:hover {
  background: rgba(37, 211, 102, 0.18);
}
.at-detail-message {
  font-size: 13px;
  color: var(--color-text, #e2e8f0);
  line-height: 1.55;
  margin: 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 10px 12px;
}
.at-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.at-note-textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text, #e2e8f0);
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.at-note-textarea:focus {
  border-color: rgba(0, 198, 167, 0.4);
}
.at-logs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.at-log-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
}
.at-log-client-reply {
  background: rgba(0, 198, 167, 0.06);
  border-left-color: #00C6A7;
}
.at-log-email-sent {
  background: rgba(96, 165, 250, 0.06);
  border-left-color: #60a5fa;
}
.at-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.at-log-action {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #00C6A7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.at-log-icon {
  font-size: 13px;
  line-height: 1;
}
.at-log-detail {
  font-size: 12px;
  color: var(--color-text, #e2e8f0);
  margin-top: 4px;
}
.at-log-note {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.at-log-note-reply {
  color: var(--color-text, #e2e8f0);
  background: rgba(0, 198, 167, 0.04);
  border-radius: 6px;
  padding: 6px 8px;
  font-style: italic;
}
.at-log-time {
  font-size: 10px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
}
.at-reason-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.at-reason-form-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 14px;
}
.at-reason-form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.at-reason-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.at-prefix-badge {
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 198, 167, 0.1);
  color: #00C6A7;
  border-radius: 6px;
  padding: 2px 8px;
}
.at-reason-actions {
  display: flex;
  gap: 4px;
}
.at-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.at-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.at-action-delete:hover {
  background: rgba(255, 77, 109, 0.12);
}
@media (max-width: 768px) {
  .at-layout-split {
    flex-direction: column;
  }
  .at-detail {
    width: 100%;
    position: static;
  }
  .at-reason-form-row {
    flex-direction: column;
  }
  .at-reason-form-row > * {
    width: 100%;
  }
}
.at-badge-blue {
  background: #3B82F6 !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.at-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.at-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0;
}
.at-dash-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 0;
  color: var(--color-text-secondary, #94a3b8);
}
.at-dash-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-accent, #4AFFC5);
  border-radius: 50%;
  animation: at-spin 0.7s linear infinite;
}
@keyframes at-spin {
  to {
    transform: rotate(360deg);
  }
}
.at-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.at-kpi-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.at-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 14px 14px 0 0;
}
.at-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.at-kpi-open::before {
  background: #FF4D6D;
}
.at-kpi-progress::before {
  background: #F59E0B;
}
.at-kpi-awaiting::before {
  background: #3B82F6;
}
.at-kpi-resolved::before {
  background: #4ADE80;
}
.at-kpi-sla::before {
  background: var(--color-accent, #4AFFC5);
}
.at-kpi-rate::before {
  background: #A78BFA;
}
.at-kpi-response::before {
  background: #FB923C;
}
.at-kpi-icon {
  font-size: 20px;
}
.at-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  line-height: 1;
}
.at-kpi-label {
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.at-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.at-chart-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px;
}
.at-chart-full {
  grid-column: 1 / -1;
}
.at-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.at-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin: 0;
}
.at-chart-period {
  display: flex;
  gap: 4px;
}
.at-period-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.at-period-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #e2e8f0);
}
.at-period-btn.active {
  background: var(--color-accent, #4AFFC5);
  border-color: var(--color-accent, #4AFFC5);
  color: #000;
}
.at-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding-bottom: 24px;
  position: relative;
}
.at-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 4px;
  height: 100%;
}
.at-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  min-height: 0;
}
.at-bar-fill {
  width: 100%;
  background:
    linear-gradient(
      180deg,
      var(--color-accent, #4AFFC5) 0%,
      rgba(74, 255, 197, 0.5) 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  min-height: 2px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.at-bar-val {
  font-size: 10px;
  font-weight: 700;
  color: #000;
  padding-top: 3px;
  line-height: 1;
}
.at-bar-label {
  font-size: 10px;
  color: var(--color-text-secondary, #94a3b8);
  white-space: nowrap;
  position: absolute;
  bottom: 0;
}
.at-dist-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.at-dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.at-dist-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text, #e2e8f0);
  min-width: 120px;
  flex-shrink: 0;
}
.at-dist-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.at-dist-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
.at-dist-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.at-dist-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  min-width: 60px;
  text-align: right;
}
.at-dist-pct {
  font-weight: 400;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 11px;
}
.at-reason-rank {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.at-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.at-rank-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent, #4AFFC5);
  min-width: 24px;
}
.at-rank-label {
  font-size: 13px;
  color: var(--color-text, #e2e8f0);
  min-width: 160px;
}
.at-rank-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.at-rank-bar {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      var(--color-accent, #4AFFC5),
      rgba(74, 255, 197, 0.4));
  border-radius: 4px;
  transition: width 0.6s ease;
}
.at-rank-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  min-width: 32px;
  text-align: right;
}
@media (max-width: 900px) {
  .at-charts-row {
    grid-template-columns: 1fr;
  }
  .at-chart-full {
    grid-column: 1;
  }
  .at-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .at-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.at-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF4D6D;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.5);
  animation: at-pulse 1.8s infinite;
}
@keyframes at-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.5);
  }
  60% {
    box-shadow: 0 0 0 6px rgba(255, 77, 109, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 109, 0);
  }
}
.at-row-unread {
  background: rgba(255, 77, 109, 0.04) !important;
  border-left: 2px solid #FF4D6D;
}
.at-row-unread:hover {
  background: rgba(255, 77, 109, 0.08) !important;
}
.at-sidebar-reply-badge {
  background: #FF4D6D;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: at-pulse 1.8s infinite;
}
.at-log-open-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.at-log-opened {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.25);
}
.at-log-not-opened {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary, #64748b);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.at-log-clickable {
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.12s;
}
.at-log-clickable:hover {
  background: rgba(74, 255, 197, 0.05) !important;
  border-color: rgba(74, 255, 197, 0.35) !important;
  transform: translateY(-1px);
}
.at-log-click-hint {
  font-size: 10px;
  color: var(--color-text-secondary, #64748b);
  font-weight: 400;
  font-style: italic;
  margin-left: 4px;
}
.at-log-reply-preview {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(74, 255, 197, 0.04);
  border-radius: 8px;
  border-left: 2px solid rgba(74, 255, 197, 0.3);
}
.at-log-reply-from {
  font-size: 11px;
  color: var(--color-text-secondary, #64748b);
  margin-bottom: 3px;
}
.at-log-reply-subject {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: 4px;
}
.at-log-reply-body {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-reply-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
  animation: at-overlay-in 0.18s ease;
}
@keyframes at-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.at-reply-modal {
  background: #111;
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 18px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(74, 255, 197, 0.1);
  animation: at-modal-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes at-modal-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.at-reply-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.06),
      rgba(74, 255, 197, 0.02));
  flex-shrink: 0;
}
.at-reply-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.at-reply-modal-icon {
  font-size: 26px;
  line-height: 1;
}
.at-reply-modal-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
}
.at-reply-modal-ticket {
  font-size: 11px;
  color: #4AFFC5;
  font-family: monospace;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.at-reply-modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  color: var(--color-text-secondary, #94a3b8);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.at-reply-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.at-reply-meta {
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  flex-shrink: 0;
}
.at-reply-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
}
.at-reply-meta-key {
  color: var(--color-text-secondary, #64748b);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  min-width: 56px;
  margin-top: 1px;
}
.at-reply-meta-val {
  color: var(--color-text, #e2e8f0);
  font-size: 13px;
  word-break: break-all;
}
.at-reply-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.at-reply-body-main {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text, #e2e8f0);
  white-space: pre-wrap;
  word-break: break-word;
}
.at-reply-quoted {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}
.at-reply-quoted summary {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}
.at-reply-quoted-body {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 12px;
  margin: 0;
  font-family: inherit;
  line-height: 1.6;
}
.at-reply-compose-box {
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.at-reply-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.at-reply-compose-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary, #00C6A7);
  letter-spacing: 0.2px;
}
.at-reply-compose-hint {
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.8;
}
.at-reply-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text, #e2e8f0);
  font-family: inherit;
  resize: vertical;
  min-height: 75px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.at-reply-textarea:focus {
  border-color: #00C6A7;
  box-shadow: 0 0 0 2px rgba(0, 198, 167, 0.15);
}
.at-reply-textarea::placeholder {
  color: #64748b;
}
[data-theme=light] .at-reply-compose-box {
  background: rgba(0, 0, 0, 0.015);
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .at-reply-textarea {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1e293b;
}
[data-theme=light] .at-reply-textarea::placeholder {
  color: #94a3b8;
}
.at-reply-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
  flex-shrink: 0;
}
.at-reply-btn-secondary {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.at-reply-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text, #e2e8f0);
}
.at-reply-btn-primary {
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #2DD4A0);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  font-family: inherit;
  letter-spacing: 0.2px;
}
.at-reply-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.at-reply-btn-primary:active {
  transform: translateY(0);
}
[data-theme=light] .at-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme=light] .at-row-selected {
  background: rgba(26, 107, 232, 0.06) !important;
  border-left-color: #1A6BE8;
}
[data-theme=light] .at-ticket-num,
[data-theme=light] .at-detail-num {
  color: #1A6BE8;
}
[data-theme=light] .at-reason-tag {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .at-detail {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .at-detail-section {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .at-detail-close {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .at-detail-close:hover {
  background: rgba(0, 0, 0, 0.10);
}
[data-theme=light] .at-detail-message {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .at-note-textarea {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.13);
}
[data-theme=light] .at-note-textarea:focus {
  border-color: rgba(26, 107, 232, 0.40);
}
[data-theme=light] .at-log-action {
  color: #1A6BE8;
}
[data-theme=light] .at-log-item {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .at-log-client-reply {
  background: rgba(26, 107, 232, 0.04);
  border-left-color: #1A6BE8;
}
[data-theme=light] .at-log-email-sent {
  background: rgba(96, 165, 250, 0.05);
}
[data-theme=light] .at-log-note-reply {
  background: rgba(26, 107, 232, 0.03);
}
[data-theme=light] .at-log-opened {
  background: rgba(26, 107, 232, 0.09);
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.22);
}
[data-theme=light] .at-log-not-opened {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .at-log-clickable:hover {
  background: rgba(26, 107, 232, 0.04) !important;
  border-color: rgba(26, 107, 232, 0.28) !important;
}
[data-theme=light] .at-log-reply-preview {
  background: rgba(26, 107, 232, 0.03);
  border-left-color: rgba(26, 107, 232, 0.28);
}
[data-theme=light] .at-prefix-badge {
  background: rgba(26, 107, 232, 0.09);
  color: #1A6BE8;
}
[data-theme=light] .at-reason-form {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .at-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .at-tabs {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme=light] .at-tab:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .at-tab.active {
  background: rgba(26, 107, 232, 0.10);
  color: #1A6BE8;
}
[data-theme=light] .at-kpi-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .at-kpi-sla::before {
  background: #1A6BE8;
}
[data-theme=light] .at-dash-spinner {
  border-color: rgba(0, 0, 0, 0.10);
  border-top-color: #1A6BE8;
}
[data-theme=light] .at-chart-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 0, 0, 0.09);
}
[data-theme=light] .at-bar-track {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme=light] .at-bar-fill {
  background:
    linear-gradient(
      180deg,
      #1A6BE8 0%,
      rgba(26, 107, 232, 0.5) 100%);
}
[data-theme=light] .at-bar-val {
  color: #ffffff;
}
[data-theme=light] .at-dist-bar-wrap {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .at-rank-bar-wrap {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme=light] .at-rank-bar {
  background:
    linear-gradient(
      90deg,
      #1A6BE8,
      rgba(26, 107, 232, 0.4));
}
[data-theme=light] .at-rank-pos {
  color: #1A6BE8;
}
[data-theme=light] .at-period-btn {
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .at-period-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .at-period-btn.active {
  background: #1A6BE8;
  border-color: #1A6BE8;
  color: #ffffff;
}
[data-theme=light] .at-reply-modal {
  background: #ffffff;
  border-color: rgba(26, 107, 232, 0.20);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(26, 107, 232, 0.10);
}
[data-theme=light] .at-reply-modal-header {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.06),
      rgba(26, 107, 232, 0.02));
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .at-reply-modal-ticket {
  color: #1A6BE8;
}
[data-theme=light] .at-reply-modal-close {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .at-reply-modal-close:hover {
  background: rgba(0, 0, 0, 0.10);
  color: #0F1923;
}
[data-theme=light] .at-reply-meta {
  background: rgba(0, 0, 0, 0.01);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .at-reply-body {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
[data-theme=light] .at-reply-quoted {
  border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .at-reply-quoted-body {
  border-left-color: rgba(0, 0, 0, 0.15);
}
[data-theme=light] .at-reply-modal-footer {
  background: rgba(0, 0, 0, 0.01);
  border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .at-reply-btn-secondary {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme=light] .at-reply-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .at-reply-btn-primary {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
  color: #ffffff;
}
[data-theme=light] .at-contact-bar {
  border-top-color: rgba(0, 0, 0, 0.07);
}
.at-unresolved-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}
.at-unresolved-card {
  background: var(--color-surface, #1e1e1e);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.2s;
}
.at-unresolved-card:hover {
  border-color: rgba(99, 102, 241, 0.45);
}
.at-unresolved-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.at-unresolved-msg {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #e2e8f0);
  font-style: italic;
  flex: 1;
}
.at-unresolved-time {
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  white-space: nowrap;
}
.at-unresolved-summary {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid rgba(99, 102, 241, 0.4);
}
.at-unresolved-train {
  margin-top: 12px;
}
.at-agent-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: fit-content;
}
.at-agent-subtab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.at-agent-subtab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #e2e8f0);
}
.at-agent-subtab.active {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.at-agent-subtab-badge {
  background: #8b5cf6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}
.at-unresolved-card--trained {
  border-color: rgba(74, 255, 197, 0.15);
}
.at-unresolved-card--trained:hover {
  border-color: rgba(74, 255, 197, 0.35);
}
.at-knowledge-answer {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid rgba(74, 255, 197, 0.4);
}
.at-knowledge-label {
  font-size: 11px;
  font-weight: 600;
  color: #4AFFC5;
  display: block;
  margin-bottom: 4px;
}
.at-knowledge-answer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text, #e2e8f0);
  white-space: pre-wrap;
}
.at-agent-config {
  padding: 4px 0;
}
.at-agent-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 12px;
}
.at-agent-config-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: 2px;
}
.at-agent-config-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
}
.at-agent-config-hint {
  font-size: 12px;
  color: var(--color-text-secondary, #94a3b8);
  margin-top: 8px;
}
.at-agent-config-prompt {
  margin-top: 16px;
}
.at-agent-prompt-editor {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--color-text, #e2e8f0);
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 14px;
  resize: vertical;
  transition: border-color 0.2s;
}
.at-agent-prompt-editor:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
}
.at-agent-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 99px;
  border: 1px solid rgba(100, 116, 139, 0.4);
  background: rgba(100, 116, 139, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.at-agent-toggle--on {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.35);
}
.at-agent-toggle-knob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #64748b;
  transition: background 0.2s;
  flex-shrink: 0;
}
.at-agent-toggle--on .at-agent-toggle-knob {
  background: #4AFFC5;
}
.at-agent-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
}
.at-agent-toggle--on .at-agent-toggle-label {
  color: #4AFFC5;
}
.at-agent-delay-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.at-agent-delay-range {
  width: 160px;
  accent-color: #6366f1;
  cursor: pointer;
}
.at-agent-delay-val {
  font-size: 13px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  color: #818cf8;
}
.at-agent-config-row--key {
  flex-wrap: wrap;
  gap: 12px;
}
.at-agent-key-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.at-agent-key-masked {
  font-family: monospace;
  font-size: 18px;
  letter-spacing: 2px;
  color: #64748b;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  user-select: none;
}
.at-agent-key-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.at-agent-key-input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  color: var(--color-text, #e2e8f0);
  font-size: 13px;
  padding: 7px 12px;
  min-width: 260px;
  outline: none;
  transition: border-color 0.2s;
}
.at-agent-key-input:focus {
  border-color: rgba(99, 102, 241, 0.7);
}
.at-agent-key-input::placeholder {
  color: #475569;
}
.at-agent-freedom-row {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.at-freedom-zones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.at-freedom-zone {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  transition: all 0.25s;
  cursor: default;
}
.at-freedom-zone--active {
  background: color-mix(in srgb, var(--zone-color) 15%, transparent);
  border-color: color-mix(in srgb, var(--zone-color) 40%, transparent);
  color: var(--color-text, #e2e8f0);
  font-weight: 600;
  box-shadow: 0 0 10px color-mix(in srgb, var(--zone-color) 20%, transparent);
}
.at-freedom-zone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.at-freedom-zone-label {
  font-size: 12px;
}
.at-freedom-zone-range {
  font-size: 10px;
  opacity: 0.6;
}
.at-freedom-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.at-freedom-value-bubble {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  line-height: 1.2;
  transition: color 0.3s;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.at-freedom-pct {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary, #94a3b8);
}
.at-freedom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background:
    linear-gradient(
      to right,
      var(--thumb-color, #10b981) 0%,
      var(--thumb-color, #10b981) var(--fill-pct, 30%),
      rgba(255, 255, 255, 0.1) var(--fill-pct, 30%),
      rgba(255, 255, 255, 0.1) 100%);
  transition: background 0.2s;
}
.at-freedom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--thumb-color, #10b981);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: grab;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}
.at-freedom-range::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
}
.at-freedom-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--thumb-color, #10b981);
  cursor: grab;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background 0.2s, transform 0.15s;
}
.at-freedom-track-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.7;
  padding: 0 2px;
}
[data-theme=light] .at-freedom-range {
  background:
    linear-gradient(
      to right,
      var(--thumb-color, #10b981) 0%,
      var(--thumb-color, #10b981) var(--fill-pct, 30%),
      rgba(0, 0, 0, 0.1) var(--fill-pct, 30%),
      rgba(0, 0, 0, 0.1) 100%);
}
[data-theme=light] .at-freedom-zone {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}
[data-theme=light] .at-freedom-value-bubble {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

/* src/components/ComposeEmail/ComposeEmailModal.css */
.cem-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: cemFadeIn 0.25s ease;
}
@keyframes cemFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cem-modal {
  width: 100%;
  max-width: 640px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  animation: cemPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cem-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(74, 255, 197, 0.35),
      transparent);
}
@keyframes cemPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cem-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #111111;
  flex-shrink: 0;
}
.cem-head-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  box-shadow: inset 0 0 0 1px rgba(74, 255, 197, 0.3);
}
.cem-head-titles {
  flex: 1;
  min-width: 0;
}
.cem-head-titles h2 {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.2px;
  margin: 0;
}
.cem-head-sub {
  font-size: 12.5px;
  color: #a0a0a0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cem-ticket-chip {
  font-size: 11px;
  font-family:
    "Roboto",
    "Courier New",
    monospace;
  letter-spacing: 0.3px;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  white-space: nowrap;
}
.cem-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #161616;
  color: #a0a0a0;
  cursor: pointer;
  transition: all 0.2s;
}
.cem-close:hover {
  color: #fff;
  background: #1e1e1e;
  border-color: rgba(74, 255, 197, 0.3);
}
.cem-body {
  padding: 22px 24px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.cem-body::-webkit-scrollbar {
  width: 6px;
}
.cem-body::-webkit-scrollbar-thumb {
  background: #1e1e1e;
  border-radius: 999px;
}
.cem-body::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 255, 197, 0.3);
}
.cem-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cem-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #a0a0a0;
}
.cem-control {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s;
}
.cem-control:focus-within {
  border-color: rgba(74, 255, 197, 0.35);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.08);
  background: #1e1e1e;
}
.cem-from-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}
.cem-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #2DD4A0);
  color: #062b22;
  user-select: none;
}
.cem-from-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.cem-from-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.cem-from-mail {
  font-size: 12px;
  font-family: "Roboto", monospace;
  color: #a0a0a0;
}
.cem-verified {
  margin-left: auto;
  font-size: 11px;
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(74, 255, 197, 0.3);
  white-space: nowrap;
}
.cem-recipients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  cursor: text;
}
.cem-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 8px 5px 5px;
  font-size: 13px;
}
.cem-chip-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  font-size: 11px;
  font-weight: 700;
}
.cem-chip-addr {
  font-family: "Roboto", monospace;
  color: #dedede;
  font-size: 13px;
}
.cem-chip-x {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #a0a0a0;
  cursor: pointer;
  transition: all 0.2s;
}
.cem-chip-x:hover {
  background: rgba(255, 77, 109, 0.15);
  color: #FF4D6D;
}
.cem-recipients input {
  flex: 1;
  min-width: 140px;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: "Roboto", monospace;
  font-size: 13.5px;
  padding: 4px 2px;
}
.cem-recipients input::placeholder {
  color: #a0a0a0;
}
.cem-subject-wrap {
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.cem-subject-pfx {
  font-size: 13px;
  color: #a0a0a0;
  font-weight: 600;
  padding-right: 8px;
  white-space: nowrap;
}
.cem-subject-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 0;
  color: #ffffff;
  font-size: 14.5px;
  font-family:
    "Sora",
    "Inter",
    sans-serif;
}
.cem-editor-shell {
  display: flex;
  flex-direction: column;
}
.cem-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cem-tbtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #a0a0a0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.cem-tbtn:hover {
  background: #1e1e1e;
  color: #ffffff;
}
.cem-tbtn:active {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
}
.cem-tdiv {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 4px;
}
.cem-editor {
  min-height: 170px;
  max-height: 240px;
  overflow-y: auto;
  padding: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #dedede;
  outline: none;
  font-family:
    "Sora",
    "Inter",
    sans-serif;
}
.cem-editor:empty::before {
  content: attr(data-ph);
  color: #a0a0a0;
  pointer-events: none;
}
.cem-editor::-webkit-scrollbar {
  width: 6px;
}
.cem-editor::-webkit-scrollbar-thumb {
  background: #1e1e1e;
  border-radius: 999px;
}
.cem-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #FF4D6D;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
}
.cem-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #111111;
  flex-shrink: 0;
}
.cem-foot-left {
  display: flex;
  gap: 6px;
  margin-right: auto;
}
.cem-ghbtn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #161616;
  color: #a0a0a0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.cem-ghbtn:hover:not(:disabled) {
  color: #ffffff;
  border-color: rgba(74, 255, 197, 0.3);
  background: #1e1e1e;
}
.cem-ghbtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cem-btn {
  font-family:
    "Sora",
    "Inter",
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
}
.cem-btn-cancel {
  padding: 11px 20px;
  background: transparent;
  color: #a0a0a0;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.cem-btn-cancel:hover:not(:disabled) {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.cem-btn-send {
  padding: 11px 24px;
  color: #062b22;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #2DD4A0);
  box-shadow: 0 0 30px rgba(74, 255, 197, 0.2);
}
.cem-btn-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 40px rgba(74, 255, 197, 0.35);
}
.cem-btn-send:active:not(:disabled) {
  transform: translateY(0);
}
.cem-btn-send:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}
.cem-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(6, 43, 34, 0.3);
  border-top-color: #062b22;
  border-radius: 50%;
  animation: cemSpin 0.6s linear infinite;
}
@keyframes cemSpin {
  to {
    transform: rotate(360deg);
  }
}
.cem-sent-overlay {
  position: absolute;
  inset: 0;
  background: #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 10;
  border-radius: 28px;
  animation: cemFadeIn 0.3s ease;
}
.cem-sent-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  box-shadow: 0 0 30px rgba(74, 255, 197, 0.2);
  animation: cemPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cem-sent-overlay h3 {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.cem-sent-overlay p {
  font-size: 13px;
  color: #a0a0a0;
  font-family: "Roboto", monospace;
  margin: 0;
}
@media (max-width: 680px) {
  .cem-modal {
    border-radius: 20px;
    max-height: calc(100vh - 32px);
  }
  .cem-head,
  .cem-body,
  .cem-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* src/pages/Tickets/SupportChat.css */
.sc-root {
  display: flex;
  height: calc(100vh - var(--header-height, 60px) - 64px);
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.sc-sidebar {
  width: 320px;
  min-width: 260px;
  max-width: 360px;
  background: #111111;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sc-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sc-sidebar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}
.sc-sidebar-icon {
  font-size: 20px;
}
.sc-btn-new-chat {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent, #4AFFC5);
  color: #000;
  border: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.sc-btn-new-chat:hover {
  opacity: 0.85;
}
.sc-filter-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: auto;
}
.sc-filter-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.sc-filter-btn.active,
.sc-filter-btn:hover {
  background: rgba(74, 255, 197, 0.12);
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.sc-list {
  flex: 1;
  overflow-y: auto;
}
.sc-empty {
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}
.sc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}
.sc-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.sc-item.active {
  background: rgba(74, 255, 197, 0.07);
  border-left: 3px solid #4AFFC5;
  padding-left: 13px;
}
.sc-item-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(74, 255, 197, 0.15);
  border: 1px solid rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-item-body {
  flex: 1;
  min-width: 0;
}
.sc-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.sc-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-item-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.sc-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sc-item-preview {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sc-unread {
  background: #4AFFC5;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.sc-item-status {
  font-size: 10px;
  font-weight: 500;
  margin-top: 3px;
  display: block;
}
.sc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  min-width: 0;
}
.sc-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.sc-chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(74, 255, 197, 0.15);
  border: 1px solid rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-chat-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sc-chat-header-name {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}
.sc-chat-header-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
.sc-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sc-status-pill {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.sc-action-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.sc-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.sc-action-btn--close {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
}
.sc-action-btn--close:hover {
  background: rgba(74, 255, 197, 0.2);
}
.sc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(
      ellipse at 20% 80%,
      rgba(74, 255, 197, 0.03) 0%,
      transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: center, center;
  background-size: 100% 100%, 60px 60px;
  background-repeat: no-repeat, repeat;
}
.sc-msg {
  display: flex;
  align-items: flex-end;
  max-width: 72%;
}
.sc-msg--mine {
  align-self: flex-end;
}
.sc-msg--theirs {
  align-self: flex-start;
}
.sc-msg-bubble {
  border-radius: 16px;
  padding: 10px 14px;
  position: relative;
  word-break: break-word;
}
.sc-msg--mine .sc-msg-bubble {
  background: var(--color-accent, #4AFFC5);
  color: #000;
  border-bottom-right-radius: 4px;
}
.sc-msg--theirs .sc-msg-bubble {
  background: #1e1e1e;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}
.sc-msg--agent .sc-msg-bubble {
  background:
    linear-gradient(
      135deg,
      #0f172a 0%,
      #1a1f35 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-bottom-left-radius: 4px;
}
.sc-msg-bubble p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.sc-msg-time {
  font-size: 10px;
  opacity: 0.6;
  display: block;
  text-align: right;
}
.sc-msg--theirs .sc-msg-time {
  text-align: left;
}
.sc-msg-system {
  align-self: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-msg-ticket-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.6;
  margin-bottom: 4px !important;
}
.sc-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #111111;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.sc-textarea {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 10px 16px;
  color: #e2e8f0;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.sc-textarea:focus {
  outline: none;
  border-color: rgba(74, 255, 197, 0.4);
}
.sc-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent, #4AFFC5);
  color: #000;
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.15s;
}
.sc-send-btn:hover:not(:disabled) {
  opacity: 0.85;
  transform: scale(1.05);
}
.sc-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sc-closed-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(100, 116, 139, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.sc-btn-new-conv {
  background: var(--color-accent, #4AFFC5);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sc-btn-new-conv:hover {
  opacity: 0.85;
}
.sc-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.3);
}
.sc-empty-icon {
  font-size: 64px;
  opacity: 0.4;
}
.sc-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.sc-empty-state p {
  font-size: 13px;
  margin: 0;
}
.sc-btn-start {
  background: var(--color-accent, #4AFFC5);
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.2s;
}
.sc-btn-start:hover {
  opacity: 0.85;
}
.sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sc-new-modal {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  animation: sc-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sc-pop {
  from {
    transform: scale(0.95) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.sc-new-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sc-new-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.sc-new-modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.sc-new-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.sc-new-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sc-new-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.sc-new-select,
.sc-new-textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #e2e8f0;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s;
}
.sc-new-select:focus,
.sc-new-textarea:focus {
  outline: none;
  border-color: rgba(74, 255, 197, 0.4);
}
.sc-new-textarea {
  resize: vertical;
  min-height: 100px;
}
.sc-new-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sc-new-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.sc-new-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
.sc-new-submit {
  background: var(--color-accent, #4AFFC5);
  border: none;
  color: #000;
  border-radius: 9px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sc-new-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sc-new-submit:hover:not(:disabled) {
  opacity: 0.85;
}
.sc-list::-webkit-scrollbar,
.sc-messages::-webkit-scrollbar {
  width: 4px;
}
.sc-list::-webkit-scrollbar-track,
.sc-messages::-webkit-scrollbar-track {
  background: transparent;
}
.sc-list::-webkit-scrollbar-thumb,
.sc-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.sc-back-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-right: 4px;
}
.sc-back-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 640px) {
  .sc-back-btn {
    display: flex;
  }
  .sc-root--mobile {
    position: relative;
    overflow: hidden;
  }
  .sc-sidebar--mobile-active {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    z-index: 2;
    display: flex;
  }
  .sc-sidebar--mobile-hidden {
    display: none;
  }
  .sc-main--mobile-active {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
  }
  .sc-main--mobile-hidden {
    display: none;
  }
}
[data-theme=light] .sc-root {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
[data-theme=light] .sc-sidebar {
  background: #ffffff;
  border-right-color: #e2e8f0;
}
[data-theme=light] .sc-sidebar-header {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .sc-sidebar-title {
  color: #1e293b;
}
[data-theme=light] .sc-filter-bar {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .sc-filter-btn {
  border-color: #e2e8f0;
  color: #64748b;
}
[data-theme=light] .sc-filter-btn.active,
[data-theme=light] .sc-filter-btn:hover {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.3);
  color: #1A6BE8;
}
[data-theme=light] .sc-btn-new-chat {
  background: #1A6BE8;
}
[data-theme=light] .sc-empty {
  color: #94a3b8;
}
[data-theme=light] .sc-item {
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .sc-item:hover {
  background: #f8fafc;
}
[data-theme=light] .sc-item.active {
  background: rgba(26, 107, 232, 0.07);
  border-left-color: #1A6BE8;
}
[data-theme=light] .sc-item-avatar {
  background: rgba(26, 107, 232, 0.1);
  border-color: rgba(26, 107, 232, 0.2);
  color: #1A6BE8;
}
[data-theme=light] .sc-item-name {
  color: #1e293b;
}
[data-theme=light] .sc-item-time {
  color: #94a3b8;
}
[data-theme=light] .sc-item-preview {
  color: #64748b;
}
[data-theme=light] .sc-unread {
  background: #1A6BE8;
  color: #fff;
}
[data-theme=light] .sc-main {
  background: #f8fafc;
}
[data-theme=light] .sc-chat-header {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .sc-chat-header-avatar {
  background: rgba(26, 107, 232, 0.1);
  border-color: rgba(26, 107, 232, 0.2);
  color: #1A6BE8;
}
[data-theme=light] .sc-chat-header-name {
  color: #1e293b;
}
[data-theme=light] .sc-chat-header-sub {
  color: #94a3b8;
}
[data-theme=light] .sc-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #475569;
}
[data-theme=light] .sc-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .sc-action-btn--close {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.2);
  color: #1A6BE8;
}
[data-theme=light] .sc-action-btn--close:hover {
  background: rgba(26, 107, 232, 0.14);
}
[data-theme=light] .sc-messages {
  background-color: #f1f5f9;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-size: 60px 60px;
  background-repeat: repeat;
}
[data-theme=light] .sc-msg-avatar {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.15);
  color: #1A6BE8;
}
[data-theme=light] .sc-msg--mine .sc-msg-bubble {
  background: #1A6BE8;
  color: #fff;
}
[data-theme=light] .sc-msg--theirs .sc-msg-bubble {
  background: #ffffff;
  color: #1e293b;
  border-color: #e2e8f0;
}
[data-theme=light] .sc-msg-system {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
  color: #64748b;
}
[data-theme=light] .sc-input-area {
  background: #ffffff;
  border-top-color: #e2e8f0;
}
[data-theme=light] .sc-textarea {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme=light] .sc-textarea:focus {
  border-color: rgba(26, 107, 232, 0.4);
}
[data-theme=light] .sc-send-btn {
  background: #1A6BE8;
}
[data-theme=light] .sc-closed-banner {
  background: rgba(0, 0, 0, 0.03);
  border-top-color: #e2e8f0;
  color: #64748b;
}
[data-theme=light] .sc-btn-new-conv {
  background: #1A6BE8;
  color: #fff;
}
[data-theme=light] .sc-empty-state {
  color: #94a3b8;
}
[data-theme=light] .sc-empty-state h3 {
  color: #64748b;
}
[data-theme=light] .sc-btn-start {
  background: #1A6BE8;
  color: #fff;
}
[data-theme=light] .sc-overlay {
  background: rgba(0, 0, 0, 0.45);
}
[data-theme=light] .sc-new-modal {
  background: #ffffff;
  border-color: #e2e8f0;
}
[data-theme=light] .sc-new-modal-header {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .sc-new-modal-header h3 {
  color: #1e293b;
}
[data-theme=light] .sc-new-modal-close {
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
}
[data-theme=light] .sc-new-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1e293b;
}
[data-theme=light] .sc-new-label {
  color: #475569;
}
[data-theme=light] .sc-new-select,
[data-theme=light] .sc-new-textarea {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme=light] .sc-new-select:focus,
[data-theme=light] .sc-new-textarea:focus {
  border-color: rgba(26, 107, 232, 0.4);
}
[data-theme=light] .sc-new-modal-footer {
  border-top-color: #e2e8f0;
}
[data-theme=light] .sc-new-cancel {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
  color: #64748b;
}
[data-theme=light] .sc-new-cancel:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .sc-new-submit {
  background: #1A6BE8;
}
[data-theme=light] .sc-back-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #475569;
}
[data-theme=light] .sc-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.sc-chat-header-actions--hidden-mobile {
  display: none;
}
.sc-status-pill--mobile {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.sc-action-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.sc-action-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 51;
  background: #1a1a2e;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px 32px;
  animation: sc-sheet-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sc-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.sc-action-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  margin: 0 auto 16px;
}
.sc-action-sheet-title {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 4px;
  text-align: center;
}
.sc-action-sheet-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 16px;
  text-align: center;
}
.sc-action-sheet-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-action-sheet-status {
  display: inline-flex;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 16px;
  margin-bottom: 4px;
}
.sc-action-sheet-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}
.sc-action-sheet-btn:hover,
.sc-action-sheet-btn:active {
  background: rgba(255, 255, 255, 0.12);
}
.sc-action-sheet-btn--close {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
}
.sc-action-sheet-btn--close:hover,
.sc-action-sheet-btn--close:active {
  background: rgba(74, 255, 197, 0.2);
}
.sc-action-sheet-btn--cancel {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
[data-theme=light] .sc-action-sheet {
  background: #ffffff;
  border-top-color: #e2e8f0;
}
[data-theme=light] .sc-action-sheet-handle {
  background: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .sc-action-sheet-title {
  color: #1e293b;
}
[data-theme=light] .sc-action-sheet-sub {
  color: #94a3b8;
}
[data-theme=light] .sc-action-sheet-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
  color: #334155;
}
[data-theme=light] .sc-action-sheet-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .sc-action-sheet-btn--close {
  background: rgba(26, 107, 232, 0.08);
  border-color: rgba(26, 107, 232, 0.2);
  color: #1A6BE8;
}
[data-theme=light] .sc-action-sheet-btn--close:hover {
  background: rgba(26, 107, 232, 0.14);
}
[data-theme=light] .sc-action-sheet-btn--cancel {
  color: #94a3b8;
  border-color: #e2e8f0;
}
[data-theme=light] .sc-action-sheet-overlay {
  background: rgba(0, 0, 0, 0.3);
}
.sc-chat-header-avatar--back {
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.15s;
}
.sc-chat-header-avatar--back:hover,
.sc-chat-header-avatar--back:active {
  background: rgba(74, 255, 197, 0.25);
  transform: scale(0.95);
}
[data-theme=light] .sc-chat-header-avatar--back:hover,
[data-theme=light] .sc-chat-header-avatar--back:active {
  background: rgba(26, 107, 232, 0.2);
}
.sc-input-wrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sc-attach-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sc-attach-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}
[data-theme=light] .sc-attach-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
  color: #64748b;
}
[data-theme=light] .sc-attach-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.sc-pending-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 180px;
  overflow-y: auto;
}
[data-theme=light] .sc-pending-files {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}
.sc-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 6px 10px;
}
.sc-pending-item--err {
  border-color: rgba(224, 42, 77, 0.35);
}
[data-theme=light] .sc-pending-item {
  background: #ffffff;
  border-color: #e2e8f0;
}
.sc-pending-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.sc-pending-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.sc-pending-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sc-pending-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme=light] .sc-pending-name {
  color: #475569;
}
.sc-pending-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}
.sc-pending-bar > div {
  height: 100%;
  background: var(--color-accent, #4AFFC5);
  border-radius: 99px;
  transition: width 0.2s;
}
[data-theme=light] .sc-pending-bar > div {
  background: #1A6BE8;
}
.sc-pending-ok {
  font-size: 11px;
  color: #4AFFC5;
  font-weight: 600;
}
[data-theme=light] .sc-pending-ok {
  color: #1A6BE8;
}
.sc-pending-err {
  font-size: 11px;
  color: #e02a4d;
}
.sc-pending-del {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.sc-pending-del:hover {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=light] .sc-pending-del {
  color: #94a3b8;
}
[data-theme=light] .sc-pending-del:hover {
  color: #475569;
}
.sc-msg-attachment {
  margin-bottom: 6px;
}
.sc-att-img {
  max-width: 220px;
  max-height: 200px;
  border-radius: 10px;
  display: block;
  cursor: zoom-in;
  object-fit: cover;
}
.sc-att-video {
  max-width: 260px;
  max-height: 200px;
  border-radius: 10px;
  display: block;
  background: #000;
}
.sc-att-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  text-decoration: none;
  max-width: 240px;
  transition: background 0.15s;
}
.sc-att-doc:hover {
  background: rgba(255, 255, 255, 0.12);
}
.sc-att-doc-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.sc-att-doc-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-msg--mine .sc-att-doc {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.15);
}
.sc-msg--mine .sc-att-doc-name {
  color: rgba(0, 0, 0, 0.75);
}
[data-theme=light] .sc-att-doc {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
}
[data-theme=light] .sc-att-doc-name {
  color: #475569;
}
[data-theme=light] .sc-msg--mine .sc-att-doc {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme=light] .sc-msg--mine .sc-att-doc-name {
  color: rgba(255, 255, 255, 0.85);
}
.sc-att-loading {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme=light] .sc-att-loading {
  color: #94a3b8;
}
.sc-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: sc-lb-fade 0.18s ease;
}
@keyframes sc-lb-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sc-lightbox-inner {
  position: relative;
  max-width: min(92vw, 900px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: sc-lb-scale 0.18s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes sc-lb-scale {
  from {
    transform: scale(0.88);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.sc-lightbox-img {
  max-width: 100%;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.sc-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-lightbox-dl {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.sc-lightbox-dl:hover {
  background: rgba(255, 255, 255, 0.2);
}
.sc-lightbox-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sc-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.sc-att-img-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.sc-att-img-btn:hover .sc-att-img {
  opacity: 0.85;
}
.sc-att-img-btn:hover .sc-att-img-hint {
  opacity: 1;
}
.sc-att-img-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.sc-att-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: sc-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes sc-spin {
  to {
    transform: rotate(360deg);
  }
}
[data-theme=light] .sc-att-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: #64748b;
}
.sc-lightbox-img--zoom {
  touch-action: none;
  cursor: zoom-in;
  will-change: transform;
  transition: transform 0.05s linear;
  user-select: none;
  -webkit-user-drag: none;
}
.sc-lightbox-img--zoom:active {
  cursor: grabbing;
}

/* src/pages/Admin/AdminLP.css */
.admin-lp-page {
  padding: 2rem;
}
.admin-lp-header {
  margin-bottom: 2rem;
}
.admin-lp-header h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.admin-lp-header p {
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.template-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s;
}
.template-card:hover {
  transform: translateY(-4px);
}
.template-preview {
  height: 160px;
  overflow: hidden;
}
.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.template-info {
  padding: 1.25rem;
}
.template-info h3 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.template-info p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.lp-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.lp-badge-fgts {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
}
.lp-badge-clt {
  background: rgba(96, 165, 250, 0.1);
  color: #60A5FA;
}
.loading-state,
.empty-state {
  text-align: center;
  padding: 4rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px dashed var(--color-border);
}

/* src/pages/Admin/AdminLandingPages.css */
.lp-admin-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.lp-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-inner-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 8px;
}
.lp-tab-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}
.lp-tab-btn:hover {
  color: var(--color-text);
}
.lp-tab-btn.active {
  color: var(--color-accent);
  font-weight: 600;
}
.lp-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
.lp-tab-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  min-height: 200px;
}
.lp-spinner {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1px);
  z-index: 10;
  border-radius: var(--radius-lg);
}
.lp-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(74, 255, 197, 0.1);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.lp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.lp-card {
  background: var(--color-surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(74, 255, 197, 0.06);
}
.lp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid;
  background: rgba(255, 255, 255, 0.02);
}
.lp-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.lp-card-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lp-card-product {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lp-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-card-badges {
  flex-shrink: 0;
}
.lp-card-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.1);
}
.lp-slug {
  font-family:
    "JetBrains Mono",
    "Fira Mono",
    monospace;
  font-size: 12px;
  color: var(--color-accent);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-copy-btn,
.lp-open-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  text-decoration: none;
}
.lp-copy-btn:hover,
.lp-open-btn:hover {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.lp-card-stats {
  display: flex;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}
.lp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-stat strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}
.lp-stat span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.lp-card-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.lp-leads-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.lp-form-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 520px;
  max-width: 660px;
}
@media (max-width: 600px) {
  .lp-form-container {
    min-width: 100%;
  }
}
.lp-form-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lp-form-tabs::-webkit-scrollbar {
  display: none;
}
.lp-form-tab {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: var(--transition);
}
.lp-form-tab:hover {
  color: var(--color-text);
}
.lp-form-tab.active {
  color: var(--color-accent);
  font-weight: 600;
}
.lp-form-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
}
.lp-form-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 300px;
}
.lp-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.lp-product-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.lp-product-btn:hover {
  border-color: var(--pt-color, var(--color-accent));
  color: var(--color-text);
}
.lp-product-btn.selected {
  border-color: var(--pt-color, var(--color-accent));
  background: color-mix(in srgb, var(--pt-color, var(--color-accent)) 12%, transparent);
  color: var(--color-text);
  font-weight: 600;
}
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  border-radius: 20px;
  color: var(--color-text);
}
.lp-chip button {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  display: flex;
}
.lp-chip button:hover {
  color: var(--color-danger);
}
.lp-inline-add {
  display: flex;
  gap: 8px;
}
.lp-inline-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 13px;
  transition: var(--transition);
}
.lp-inline-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.1);
}
.lp-add-btn {
  padding: 8px 14px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: rgba(74, 255, 197, 0.08);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.lp-add-btn:hover {
  background: var(--color-accent);
  color: #000;
}
.lp-stats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.lp-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.lp-stat-item strong {
  color: var(--color-accent);
  font-weight: 700;
}
.lp-stat-item span {
  color: var(--color-text-secondary);
}
.lp-stat-item button {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.lp-stat-item button:hover {
  color: var(--color-danger);
}
.lp-stat-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.lp-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  position: relative;
}
.lp-faq-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.lp-faq-a {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.lp-faq-remove {
  margin-top: 8px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--color-danger, #ef4444);
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}
.lp-faq-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: var(--transition);
  line-height: 1.5;
}
.lp-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.1);
}
.lp-toggles {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.lp-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
}
.lp-toggle-label input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.lp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-table th {
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-table td {
  padding: 14px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.015);
}
.font-data {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}
.small {
  font-size: 12px;
}

/* src/pages/Admin/AdminPreCadastros.css */
.apc-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 2px;
}
.admin-section-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.apc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.apc-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.apc-kpi-icon {
  font-size: 20px;
}
.apc-kpi-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #4AFFC5;
}
.apc-kpi-label {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.apc-row {
  cursor: pointer;
  transition: background 0.15s;
}
.apc-row:hover {
  background: rgba(74, 255, 197, 0.04);
}
.apc-row-alert td:first-child {
  border-left: 3px solid #FFB830;
}
.apc-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.apc-status-badge.md {
  font-size: 12.5px;
  padding: 4px 14px;
}
.apc-alert-mini {
  font-size: 11px;
  color: #FFB830;
  margin-top: 2px;
}
.apc-docs-ok {
  color: #4AFFC5;
  font-size: 12px;
  font-weight: 600;
}
.apc-docs-nok {
  color: #555;
  font-size: 12px;
}
.apc-btn-ver {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #9CA3C6;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.apc-btn-ver:hover {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.apc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apc-modal {
  background: #111112;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  width: 1200px;
  height: 82vh;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  flex-shrink: 0;
}
.apc-modal-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  gap: 16px;
}
.apc-hdr-left {
  flex: 1;
  min-width: 0;
}
.apc-hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.apc-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #E5E7F1;
}
.apc-modal-sub {
  font-size: 0.8rem;
  color: #9CA3C6;
  margin-top: 2px;
}
.apc-del-doc {
  flex-shrink: 0;
  background: rgba(255, 77, 106, 0.08);
  border: 1px solid rgba(255, 77, 106, 0.2);
  border-radius: 6px;
  color: #FF4D6A;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 7px;
  transition: background 0.15s;
}
.apc-del-doc:hover {
  background: rgba(255, 77, 106, 0.18);
}
.apc-view-doc {
  flex-shrink: 0;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.18);
  border-radius: 6px;
  color: #4AFFC5;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 7px;
  transition: background 0.15s;
}
.apc-view-doc:hover {
  background: rgba(74, 255, 197, 0.16);
}
.apc-overlay ~ .viewer-overlay,
.viewer-overlay {
  z-index: 3000;
}
.apc-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #9CA3C6;
  cursor: pointer;
  padding: 6px 11px;
  font-size: 14px;
  line-height: 1;
  transition: all 0.15s;
}
.apc-close-btn:hover {
  background: rgba(255, 77, 106, 0.1);
  border-color: rgba(255, 77, 106, 0.3);
  color: #FF4D6A;
}
.apc-modal-tabs {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  padding: 10px 20px 0;
  gap: 6px;
  background: rgba(255, 255, 255, 0.008);
}
.apc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  transition: all 0.2s cubic-bezier(.22, 1, .36, 1);
  white-space: nowrap;
  position: relative;
  bottom: -1px;
}
.apc-tab:hover {
  color: #9CA3C6;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.apc-tab.active {
  color: #4AFFC5;
  background: #1a1f2e;
  border-color: rgba(74, 255, 197, 0.35);
  box-shadow: 0 -2px 16px rgba(74, 255, 197, 0.12), 0 4px 0 #1a1f2e;
  transform: scale(1.04) translateY(-2px);
  z-index: 2;
}
.apc-modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.apc-modal-body.apc-modal-body-split {
  flex-direction: row;
  overflow: hidden;
}
.apc-loading {
  padding: 48px;
  text-align: center;
  color: #9CA3C6;
  font-size: 14px;
}
.apc-empty-msg {
  color: #666;
  font-size: 0.83rem;
}
.apc-dashboard {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apc-actions-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.apc-actions-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  flex: 0 0 auto;
}
.apc-actions-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.apc-label-xs {
  font-size: 0.62rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.apc-select {
  padding: 8px 30px 8px 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #E5E7F1;
  font-size: 0.83rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3C6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s;
  min-width: 190px;
}
.apc-select:focus {
  outline: none;
  border-color: #4AFFC5;
}
.apc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #9CA3C6;
  transition: all 0.2s;
  white-space: nowrap;
}
.apc-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #E5E7F1;
}
.apc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.apc-btn-save {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.apc-btn-save:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.18);
}
.apc-btn-green {
  background: rgba(74, 255, 197, 0.07);
  border-color: rgba(74, 255, 197, 0.22);
  color: #4AFFC5;
}
.apc-btn-green:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.14);
}
.apc-btn-gold {
  background: rgba(255, 179, 0, 0.08);
  border-color: rgba(255, 179, 0, 0.25);
  color: #FFB300;
}
.apc-tag-publicado {
  font-size: 0.78rem;
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.08);
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 20px;
  padding: 4px 12px;
}
.apc-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 184, 48, 0.06);
  border: 1px solid rgba(255, 184, 48, 0.25);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.82rem;
  color: #FFB830;
}
.apc-alert-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  font-size: 0.78rem;
  opacity: 0.85;
}
.apc-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apc-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.apc-box-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9CA3C6;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  align-items: center;
  gap: 6px;
}
.apc-box-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 14px 12px;
  gap: 8px;
}
.apc-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.apc-f-span2 {
  grid-column: span 2;
}
.apc-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.apc-f-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.apc-f-val {
  font-size: 0.86rem;
  font-weight: 500;
  color: #D1D5F0;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  padding: 6px 9px;
}
.apc-f-val.mono {
  font-family: monospace;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.apc-endereco {
  font-size: 0.78rem;
  color: #9CA3C6;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.4;
}
.apc-bank-code {
  font-family: monospace;
  font-size: 0.72rem;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  color: #4AFFC5;
}
.apc-socio-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 10px 8px;
}
.apc-socio-view + .apc-socio-view {
  margin-top: 6px;
}
.apc-socio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-socio-sep {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 2px;
}
.apc-socio-num {
  font-size: 0.62rem;
  font-weight: 700;
  color: #F472B6;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.apc-lgpd-bar {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 0.75rem;
  color: #666;
}
.apc-lgpd-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.apc-lgpd-item code {
  font-family: monospace;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.apc-modal-logs {
  max-width: 560px;
  max-height: 92vh;
}
.apc-logs-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.015);
}
.apc-logs-ctrl-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.apc-logs-total {
  font-size: 0.78rem;
  color: #9CA3C6;
}
.apc-logs-total strong {
  color: #E5E7F1;
  font-size: 0.9rem;
}
.apc-logs-limit-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #555;
}
.apc-logs-limit-sel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #D1D5F0;
  font-size: 0.72rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.apc-logs-limit-sel:focus {
  outline: none;
  border-color: rgba(74, 255, 197, 0.4);
}
.apc-logs-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}
.apc-logs-pg-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #9CA3C6;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.apc-logs-pg-btn:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  border-color: rgba(74, 255, 197, 0.3);
}
.apc-logs-pg-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.apc-logs-pg-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #9CA3C6;
  min-width: 48px;
  justify-content: center;
}
.apc-logs-pg-curr {
  color: #E5E7F1;
  font-weight: 600;
}
.apc-logs-pg-sep {
  color: #444;
}
.apc-logs-timeline {
  padding: 16px 20px 8px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}
.apc-log-event {
  display: flex;
  gap: 14px;
  padding-bottom: 4px;
}
.apc-log-event-last {
  padding-bottom: 16px;
}
.apc-log-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
}
.apc-log-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: box-shadow 0.2s;
}
.apc-log-event:hover .apc-log-icon {
  box-shadow: 0 0 10px rgba(74, 255, 197, 0.12);
}
.apc-log-line {
  width: 1.5px;
  flex: 1;
  min-height: 12px;
  background: rgba(255, 255, 255, 0.07);
  margin-top: 4px;
  margin-bottom: 4px;
}
.apc-log-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 16px;
  padding-top: 6px;
}
.apc-log-event-last .apc-log-body {
  padding-bottom: 0;
}
.apc-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.apc-log-label {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
}
.apc-log-num-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #444;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.apc-log-time {
  font-size: 0.72rem;
  color: #555;
  margin-top: 4px;
}
.apc-log-status-change {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}
.apc-log-status-from {
  color: #666;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.apc-log-status-change svg {
  color: #444;
  flex-shrink: 0;
}
.apc-log-status-to {
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid currentColor;
  opacity: 0.9;
}
.apc-log-file {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.75rem;
  color: #9CA3C6;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 6px;
  padding: 3px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apc-log-meta {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #666;
}
.apc-logs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  color: #555;
  font-size: 0.85rem;
  text-align: center;
}
.apc-logs-empty span {
  font-size: 2rem;
}
.apc-logs-footer-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.apc-logs-pg-dot {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #9CA3C6;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.apc-logs-pg-dot:hover {
  background: rgba(74, 255, 197, 0.08);
  color: #4AFFC5;
  border-color: rgba(74, 255, 197, 0.25);
}
.apc-logs-pg-dot.active {
  background: rgba(74, 255, 197, 0.15);
  border-color: rgba(74, 255, 197, 0.4);
  color: #4AFFC5;
  font-weight: 700;
}
.apc-docs-wrap {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.apc-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.apc-doc-row:hover {
  border-color: rgba(74, 255, 197, 0.2);
}
.apc-doc-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.apc-doc-info {
  flex: 1;
  min-width: 0;
}
.apc-doc-name {
  font-size: 0.8rem;
  color: #E5E7F1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apc-doc-meta {
  font-size: 0.7rem;
  color: #666;
  margin-top: 2px;
}
.apc-ocr-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.apc-ocr-badge.ocr-ok {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
}
.apc-ocr-badge.ocr-warn {
  background: rgba(255, 184, 48, 0.1);
  color: #FFB830;
}
.apc-del-doc {
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.apc-del-doc:hover {
  background: rgba(255, 77, 106, 0.1);
  color: #FF4D6A;
}
.apc-modal-edit {
}
.apc-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.1);
  color: #A78BFA;
  transition: all 0.2s;
  white-space: nowrap;
}
.apc-btn-edit:hover {
  background: rgba(167, 139, 250, 0.2);
}
.apc-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.apc-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.apc-edit-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.apc-edit-col:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.apc-edit-section {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-edit-section:last-child {
  border-bottom: none;
}
.apc-edit-socios {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.apc-edit-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.apc-edit-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.apc-edit-cnpj-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: end;
}
.apc-ef {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apc-ef-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.apc-ef-input {
  width: 100%;
  padding: 9px 11px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: #E5E7F1;
  font-size: 0.85rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}
.apc-ef-input:focus {
  outline: none;
  border-color: #4AFFC5;
  box-shadow: 0 0 0 2px rgba(74, 255, 197, 0.08);
}
.apc-ef-input.mono {
  font-family: monospace;
  letter-spacing: 0.03em;
}
.apc-ef-input::placeholder {
  color: #444;
}
select.apc-ef-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3C6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.apc-btn-buscar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(74, 255, 197, 0.4);
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  white-space: nowrap;
  transition: all 0.2s;
  align-self: flex-end;
  height: 38px;
}
.apc-btn-buscar:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.22);
}
.apc-btn-buscar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.apc-btn-buscar.loading {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.apc-socios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.apc-socio-view-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-socio-view-hdr {
  font-size: 0.68rem;
  font-weight: 700;
  color: #F472B6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(244, 114, 182, 0.15);
}
.apc-view-actions-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-height: 56px;
}
.apc-status-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.apc-status-group-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.apc-status-select-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 5px 6px 5px 10px;
  transition: border-color 0.25s;
}
.apc-status-select-pill:focus-within {
  background: rgba(255, 255, 255, 0.06);
}
.apc-status-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.25s;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}
.apc-select-inline {
  background: transparent;
  border: none;
  color: #E5E7F1;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3C6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding: 1px 20px 1px 0;
  min-width: 140px;
  font-family: inherit;
}
.apc-select-inline:focus {
  outline: none;
}
.apc-select-inline option {
  background: #1a1a1a;
}
.apc-vbar {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  margin: 0 4px;
}
.apc-view-actions-bar .apc-actions-btns {
  padding: 10px 16px;
}
.apc-socio-edit-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-socio-novo {
  border-color: rgba(74, 255, 197, 0.15);
  background: rgba(74, 255, 197, 0.03);
}
.apc-socio-edit-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #9CA3C6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.apc-btn-remover {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 77, 106, 0.3);
  background: rgba(255, 77, 106, 0.08);
  color: #FF4D6A;
  transition: all 0.15s;
}
.apc-btn-remover:hover {
  background: rgba(255, 77, 106, 0.16);
}
.apc-edit-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.apc-docs-inline {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.apc-docs-inline-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.apc-btn-zip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(74, 255, 197, 0.3);
  background: rgba(74, 255, 197, 0.08);
  color: #4AFFC5;
  text-decoration: none;
  transition: all 0.2s;
}
.apc-btn-zip:hover {
  background: rgba(74, 255, 197, 0.16);
}
.apc-docs-inline-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 6px;
  padding: 10px 12px;
  min-height: 44px;
}
.apc-doc-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.apc-doc-row-inline:hover {
  border-color: rgba(74, 255, 197, 0.2);
}
.apc-doc-icon-sm {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.apc-upload-section {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
}
.apc-upload-title {
  font-size: 0.63rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}
.apc-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.apc-upload-tipo {
  padding: 8px 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #E5E7F1;
  font-size: 0.8rem;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 160px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3C6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.apc-upload-tipo:focus {
  outline: none;
  border-color: #4AFFC5;
}
.apc-upload-file-label {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.apc-upload-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.apc-upload-file-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #9CA3C6;
  font-size: 0.8rem;
  transition: border-color 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.apc-upload-file-label:hover .apc-upload-file-btn {
  border-color: rgba(74, 255, 197, 0.3);
  color: #E5E7F1;
}
.apc-btn-upload {
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .apc-row-2col {
    grid-template-columns: 1fr;
  }
  .apc-docs-wrap,
  .apc-logs-wrap {
    grid-template-columns: 1fr;
  }
  .apc-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
  .apc-overlay {
    align-items: flex-end;
    padding: 0;
  }
}
@media (max-width: 600px) {
  .apc-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
  .apc-box-grid {
    grid-template-columns: 1fr;
  }
  .apc-f-span2 {
    grid-column: span 1;
  }
  .apc-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .apc-edit-grid {
    grid-template-columns: 1fr;
  }
  .apc-edit-col:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .apc-edit-row2 {
    grid-template-columns: 1fr;
  }
  .apc-edit-cnpj-row {
    grid-template-columns: 1fr;
  }
  .apc-socios-grid {
    grid-template-columns: 1fr;
  }
}
.apc-modal-id-info {
  font-size: 0.92rem;
  font-weight: 700;
  color: #E5E7F1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 580px;
}
.apc-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.apc-modal-split {
}
.apc-modal-main-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
.apc-tab {
  display: flex;
  align-items: center;
  gap: 6px;
}
.apc-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
}
.apc-tab-badge.red {
  background: rgba(255, 77, 106, 0.15);
  color: #FF4D6A;
  border: 1px solid rgba(255, 77, 106, 0.3);
}
.apc-tab-badge.green {
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.3);
}
.apc-tabs-spacer {
  flex: 1;
}
.apc-edit-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.08);
  color: #A78BFA;
  transition: all 0.2s;
  white-space: nowrap;
  align-self: center;
  margin-left: auto;
  margin-right: 4px;
  margin-bottom: 4px;
}
.apc-edit-mode-btn:hover {
  background: rgba(167, 139, 250, 0.16);
}
.apc-btn-approve {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.35);
  color: #4AFFC5;
}
.apc-btn-approve:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.2);
}
.apc-btn-contract {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.35);
  color: #A78BFA;
}
.apc-btn-contract:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.2);
}
.apc-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9CA3C6;
  font-size: 0.75rem;
}
.apc-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #E5E7F1;
}
.apc-btn-viewer-on {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
  font-size: 0.75rem;
  gap: 6px;
}
.apc-btn-viewer-on:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.16);
}
.apc-doc-viewer-panel {
  width: 45%;
  min-width: 340px;
  max-width: 700px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  background: #0d0d0e;
  flex-shrink: 0;
  overflow: hidden;
}
.apc-dvp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
  gap: 8px;
}
.apc-dvp-header-info {
  min-width: 0;
  flex: 1;
}
.apc-dvp-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #E5E7F1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apc-dvp-sub {
  font-size: 0.65rem;
  color: #555;
  margin-top: 1px;
}
.apc-dvp-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.apc-dvp-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: #666;
  cursor: pointer;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.apc-dvp-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #9CA3C6;
}
.apc-dvp-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.apc-dvp-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.apc-dvp-footer {
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.apc-dvp-download-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(74, 255, 197, 0.07);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.apc-dvp-download-btn:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.14);
}
.apc-dvp-download-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.apc-docs-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 14px 18px;
}
.apc-doc-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.apc-doc-card:hover {
  border-color: rgba(74, 255, 197, 0.3);
  background: rgba(74, 255, 197, 0.04);
}
.apc-doc-card-active {
  border-color: rgba(74, 255, 197, 0.5);
  background: rgba(74, 255, 197, 0.07);
  box-shadow: 0 0 0 1px rgba(74, 255, 197, 0.25);
}
.apc-doc-card-icon {
  display: flex;
  align-items: center;
  gap: 6px;
}
.apc-doc-card-file-icon {
  font-size: 1.6rem;
}
.apc-doc-card-ext {
  font-size: 0.6rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 2px 5px;
}
.apc-doc-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.apc-doc-card-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #D1D5F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apc-doc-card-meta {
  font-size: 0.65rem;
  color: #555;
}
.apc-doc-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.apc-doc-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.apc-doc-card-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.apc-doc-card-btn.view {
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.18);
  color: #4AFFC5;
}
.apc-doc-card-btn.view:hover {
  background: rgba(74, 255, 197, 0.14);
}
.apc-doc-card-btn.del {
  background: rgba(255, 77, 106, 0.06);
  border: 1px solid rgba(255, 77, 106, 0.18);
  color: #FF4D6A;
}
.apc-doc-card-btn.del:hover {
  background: rgba(255, 77, 106, 0.14);
}
.apc-solicitar-panel {
  margin: 0 18px 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apc-solicitar-hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.apc-solicitar-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #A78BFA;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.apc-editor-toggle-btn {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #C4B5FD;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.apc-editor-toggle-btn:hover {
  background: rgba(167, 139, 250, 0.22);
  border-color: rgba(167, 139, 250, 0.5);
  color: #EDE9FE;
}
.apc-editor-toggle-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #9CA3C6;
}
.apc-solicitar-subtitle {
  font-size: 0.7rem;
  color: #71717A;
  margin-top: -2px;
}
.apc-req-docs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apc-req-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.apc-req-doc-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}
.apc-req-doc-item.selected {
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.05);
}
.apc-req-doc-item.ok {
  border-left: 3px solid #4AFFC5;
}
.apc-req-doc-item.missing {
  border-left: 3px solid #FF4D6A;
}
.apc-req-doc-checkbox {
  accent-color: #A78BFA;
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}
.apc-req-doc-status {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.apc-req-doc-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.apc-req-doc-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #D1D5F0;
}
.apc-req-doc-desc {
  font-size: 0.65rem;
  color: #6B7280;
}
.apc-req-doc-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.apc-req-doc-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.apc-req-doc-tag.tag-ok {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.25);
}
.apc-req-doc-tag.tag-miss {
  background: rgba(255, 77, 106, 0.08);
  color: #FF4D6A;
  border: 1px solid rgba(255, 77, 106, 0.25);
}
.apc-req-doc-tag.tag-req {
  background: rgba(167, 139, 250, 0.18);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.4);
}
.apc-solicitar-all-ok-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(74, 255, 197, 0.05);
  border: 1px solid rgba(74, 255, 197, 0.2);
  flex-wrap: wrap;
}
.apc-solicitar-all-ok-text {
  color: #4AFFC5;
  font-size: 0.78rem;
  font-weight: 600;
}
.apc-btn-open-editor {
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #C4B5FD;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s;
}
.apc-btn-open-editor:hover {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.5);
  color: #EDE9FE;
}
.apc-solicitar-quick-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-solicitar-obs-label {
  font-size: 0.72rem;
  color: #9CA3C6;
  font-weight: 600;
}
.apc-solicitar-obs {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #D1D5F0;
  font-size: 0.78rem;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.apc-solicitar-obs:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.4);
}
.apc-solicitar-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.apc-btn-personalizar-inline {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #C4B5FD;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.apc-btn-personalizar-inline:hover {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.5);
  color: #EDE9FE;
}
.apc-message-editor-box {
  background: rgba(15, 20, 32, 0.75);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.apc-editor-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.apc-editor-hdr-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.apc-editor-hdr-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #E5E7F1;
}
.apc-editor-badge-recipient {
  font-size: 0.7rem;
  color: #9CA3C6;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.apc-btn-reset-text {
  font-size: 0.68rem;
  color: #9CA3C6;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.apc-btn-reset-text:hover {
  color: #4AFFC5;
  border-color: rgba(74, 255, 197, 0.35);
  background: rgba(74, 255, 197, 0.06);
}
.apc-editor-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.apc-editor-field-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.apc-editor-label {
  font-size: 0.67rem;
  font-weight: 700;
  color: #A78BFA;
  letter-spacing: 0.05em;
}
.apc-editor-chars-hint {
  font-size: 0.65rem;
  color: #6B7280;
}
.apc-editor-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #E5E7F1;
  font-size: 0.8rem;
  padding: 8px 12px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.apc-editor-input:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
}
.apc-editor-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #E5E7F1;
  font-size: 0.8rem;
  line-height: 1.55;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.apc-editor-textarea:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
}
.apc-editor-hint {
  font-size: 0.7rem;
  color: #9CA3C6;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid #60A5FA;
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.45;
}
.apc-editor-hint code {
  color: #4AFFC5;
  font-family: monospace;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 4px;
  border-radius: 3px;
}
.apc-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.apc-btn-cancel-editor {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9CA3C6;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.apc-btn-cancel-editor:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #E5E7F1;
}
.apc-solicitar-btn {
  padding: 10px 18px;
  border-radius: 9px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #EDE9FE;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}
.apc-solicitar-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.28);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.25);
}
.apc-solicitar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.apc-lead-emails-panel {
  margin: 0 18px 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apc-lead-emails-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.apc-lead-emails-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.apc-lead-emails-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #38BDF8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.apc-lead-emails-count-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  text-transform: none;
  letter-spacing: 0;
}
.apc-lead-emails-sub {
  font-size: 0.72rem;
  color: #8892B0;
  font-family: monospace;
}
.apc-lead-emails-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38BDF8;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.apc-lead-emails-sync-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.45);
}
.apc-lead-emails-sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.apc-lead-emails-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}
.apc-lead-emails-filter-label {
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.apc-lead-emails-filter-input {
  background: #0D1117;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #F1F5F9;
  font-size: 0.76rem;
  padding: 5px 10px;
  font-family: monospace;
  min-width: 240px;
  flex: 1;
  max-width: 320px;
  outline: none;
  transition: border-color 0.2s;
}
.apc-lead-emails-filter-input:focus {
  border-color: #38BDF8;
}
.apc-lead-emails-filter-btn {
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38BDF8;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.apc-lead-emails-filter-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.5);
}
.apc-lead-emails-reset-btn {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.apc-lead-emails-reset-btn:hover {
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
@keyframes apcSpinAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.apc-spin {
  display: inline-block;
  animation: apcSpinAnim 1s linear infinite;
}
.apc-lead-emails-loading {
  padding: 16px;
  text-align: center;
  color: #8892B0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.apc-lead-emails-empty {
  padding: 18px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.apc-lead-emails-empty-icon {
  font-size: 1.5rem;
}
.apc-lead-emails-empty-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #CBD5E1;
}
.apc-lead-emails-empty-hint {
  font-size: 0.72rem;
  color: #64748B;
  max-width: 520px;
  line-height: 1.4;
}
.apc-lead-emails-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-lead-email-item {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.apc-lead-email-item.is-doc-reply {
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.025);
}
.apc-lead-email-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.apc-lead-email-header:hover {
  background: rgba(255, 255, 255, 0.03);
}
.apc-lead-email-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.apc-lead-email-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.apc-email-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.apc-email-badge.doc-reply {
  background: rgba(167, 139, 250, 0.15);
  color: #C4B5FD;
  border: 1px solid rgba(167, 139, 250, 0.35);
}
.apc-email-badge.unread {
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.apc-email-badge.read {
  background: rgba(255, 255, 255, 0.05);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.apc-lead-email-date {
  font-size: 0.7rem;
  color: #64748B;
  font-family: monospace;
}
.apc-lead-email-subject {
  font-size: 0.84rem;
  font-weight: 600;
  color: #F1F5F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apc-lead-email-sender {
  font-size: 0.72rem;
  color: #94A3B8;
}
.apc-lead-email-actions-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.apc-lead-email-att-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FBBF24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
}
.apc-lead-email-btn-expand {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.apc-lead-email-btn-expand:hover {
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.06);
}
.apc-lead-email-body-expanded {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apc-lead-email-body-text {
  font-size: 0.78rem;
  color: #CBD5E1;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.apc-lead-email-empty-body {
  color: #64748B;
  font-style: italic;
}
.apc-lead-email-attachments-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(56, 189, 248, 0.03);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
}
.apc-lead-email-attachments-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #38BDF8;
}
.apc-lead-email-attachments-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apc-lead-att-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.2s;
  flex-wrap: wrap;
}
.apc-lead-att-card.imported {
  border-color: rgba(74, 255, 197, 0.3);
  background: rgba(74, 255, 197, 0.03);
}
.apc-lead-att-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.apc-lead-att-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 140px;
}
.apc-lead-att-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #F1F5F9;
  word-break: break-all;
}
.apc-lead-att-size {
  font-size: 0.68rem;
  color: #64748B;
  font-family: monospace;
}
.apc-lead-att-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.apc-lead-att-view-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.apc-lead-att-view-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.apc-lead-att-select {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #E2E8F0;
  font-size: 0.72rem;
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
  max-width: 190px;
}
.apc-lead-att-select:focus {
  border-color: #38BDF8;
}
.apc-lead-att-import-btn {
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(74, 255, 197, 0.15);
  border: 1px solid rgba(74, 255, 197, 0.35);
  color: #4AFFC5;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.apc-lead-att-import-btn:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.25);
  border-color: rgba(74, 255, 197, 0.6);
  transform: translateY(-1px);
}
.apc-lead-att-import-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.apc-lead-att-imported-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(74, 255, 197, 0.25);
}
.apc-docs-inline-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  gap: 12px;
}
.apc-modal-body:not(.apc-modal-body-split) .apc-modal-main-content {
  overflow-y: auto;
}
.apc-view-actions-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.015);
}
.apc-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apc-status-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.apc-status-select-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
}
.apc-status-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.apc-select-inline {
  background: transparent;
  border: none;
  color: #D1D5F0;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.apc-select-inline option {
  background: #111112;
}
.apc-vbar {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.apc-btn-zip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.apc-btn-zip:hover {
  background: rgba(74, 255, 197, 0.14);
}
.apc-upload-section {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apc-upload-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9CA3C6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.apc-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.apc-upload-tipo {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #D1D5F0;
  font-size: 0.78rem;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.apc-upload-tipo:focus {
  border-color: rgba(74, 255, 197, 0.4);
}
.apc-upload-file-input {
  display: none;
}
.apc-upload-file-label {
  cursor: pointer;
  flex: 1;
  min-width: 160px;
}
.apc-upload-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9CA3C6;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: border-color 0.2s;
  width: 100%;
}
.apc-upload-file-label:hover .apc-upload-file-btn {
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.apc-socio-view-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apc-socio-view-hdr {
  font-size: 0.62rem;
  font-weight: 700;
  color: #F472B6;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(244, 114, 182, 0.12);
}
.apc-socio-edit-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apc-socio-novo {
  border-style: dashed;
  border-color: rgba(74, 255, 197, 0.15);
}
.apc-socio-edit-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 700;
  color: #9CA3C6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.apc-btn-remover {
  background: rgba(255, 77, 106, 0.08);
  border: 1px solid rgba(255, 77, 106, 0.2);
  border-radius: 7px;
  color: #FF4D6A;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  transition: all 0.15s;
}
.apc-btn-remover:hover {
  background: rgba(255, 77, 106, 0.18);
}
.apc-edit-cnpj-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: flex-end;
}
.apc-btn-buscar {
  padding: 8px 14px;
  border-radius: 9px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #A78BFA;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.apc-btn-buscar:hover {
  background: rgba(167, 139, 250, 0.2);
}
.apc-btn-buscar.loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.apc-btn-buscar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.apc-edit-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
  flex-shrink: 0;
}
.apc-socios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.apc-btn-novo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.15) 0%,
      rgba(74, 255, 197, 0.08) 100%);
  border: 1px solid rgba(74, 255, 197, 0.35);
  color: #4AFFC5;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.apc-btn-novo:hover {
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.25) 0%,
      rgba(74, 255, 197, 0.14) 100%);
  border-color: rgba(74, 255, 197, 0.6);
  box-shadow: 0 2px 14px rgba(74, 255, 197, 0.15);
  transform: translateY(-1px);
}
.apc-novo-modal {
  background: #13141f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  width: 900px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.apc-novo-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 6px;
}
.apc-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.apc-btn-archive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.25);
  color: #6B7280;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
}
.apc-btn-archive:hover {
  background: rgba(107, 114, 128, 0.2);
  border-color: rgba(107, 114, 128, 0.45);
  color: #9CA3AF;
}
.apc-btn-archive.restore {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
}
.apc-btn-archive.restore:hover {
  background: rgba(74, 255, 197, 0.16);
  border-color: rgba(74, 255, 197, 0.4);
}
tr.apc-row-arquivado {
  opacity: 0.5;
}
tr.apc-row-arquivado:hover {
  opacity: 0.75;
}
.apc-toggle-arquivados {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(107, 114, 128, 0.08);
  border: 1px solid rgba(107, 114, 128, 0.2);
  color: #6B7280;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.apc-toggle-arquivados:hover {
  background: rgba(107, 114, 128, 0.16);
  border-color: rgba(107, 114, 128, 0.35);
  color: #9CA3AF;
}
.apc-toggle-arquivados.active {
  background: rgba(107, 114, 128, 0.18);
  border-color: rgba(107, 114, 128, 0.45);
  color: #D1D5DB;
}
.apc-novo-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
}
.apc-novo-step {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #555;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.apc-novo-step.done {
  background: rgba(74, 255, 197, 0.1);
  border-color: rgba(74, 255, 197, 0.4);
  color: #4AFFC5;
}
.apc-novo-step.active {
  background: rgba(74, 255, 197, 0.18);
  border-color: #4AFFC5;
  color: #4AFFC5;
  box-shadow: 0 0 0 2px rgba(74, 255, 197, 0.12);
}
.apc-novo-step-line {
  flex: 1;
  height: 1.5px;
  width: 24px;
  background: rgba(74, 255, 197, 0.3);
}
.apc-novo-success-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 18px 18px 14px;
  padding: 14px 16px;
  background: rgba(74, 255, 197, 0.05);
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 12px;
}
.apc-novo-success-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.apc-novo-success-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4AFFC5;
  margin-bottom: 3px;
}
.apc-novo-success-sub {
  font-size: 0.78rem;
  color: #9CA3C6;
  line-height: 1.4;
}
.apc-novo-docs-list {
  margin: 14px 18px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.apc-novo-docs-list-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #555;
  margin-bottom: 4px;
}
.apc-novo-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.apc-novo-doc-check {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.apc-novo-doc-tipo {
  color: #9CA3C6;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}
.apc-novo-doc-nome {
  color: #E5E7F1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apc-tenant-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.apc-tenant-badge.default {
  background: rgba(255, 255, 255, 0.05);
  color: #888;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.apc-tenant-badge.custom {
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.2);
}

/* src/pages/Public/PublicPartnerLP.css */
:root {
  --pplp-bg: #0e141c;
  --pplp-surface: #0e141c;
  --pplp-surface-lowest: #090f16;
  --pplp-surface-low: #161c24;
  --pplp-surface-container: #1a2028;
  --pplp-surface-high: #242a33;
  --pplp-surface-highest: #2f353e;
  --pplp-primary: #4edea3;
  --pplp-primary-container: #10b981;
  --pplp-on-primary: #003824;
  --pplp-on-surface: #dde3ee;
  --pplp-on-surface-variant: #bbcabf;
  --pplp-outline: #86948a;
  --pplp-outline-variant: #3c4a42;
  --pplp-font:
    "Hanken Grotesk",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.pplp-page-wrapper {
  min-height: 100vh;
  width: 100%;
  background-color: var(--pplp-bg);
  color: var(--pplp-on-surface);
  font-family: var(--pplp-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.pplp-app-container {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--pplp-surface);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.anim-slide-left {
  animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.anim-slide-right {
  animation: slideInRight 1.0s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.anim-fade-up {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.pplp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background-color: rgba(14, 20, 28, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(47, 53, 62, 0.6);
  display: flex;
  justify-content: center;
}
.pplp-header-inner {
  width: 100%;
  max-width: 480px;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pplp-brand-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pplp-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background-color: var(--pplp-surface-high);
  border: 1px solid rgba(78, 222, 163, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pplp-primary);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
.pplp-brand-text {
  display: flex;
  flex-direction: column;
}
.pplp-brand-title {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.pplp-brand-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pplp-on-surface);
}
.pplp-brand-tag {
  font-size: 9px;
  color: var(--pplp-primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.pplp-brand-bacen {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.pplp-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pplp-primary);
  box-shadow: 0 0 8px var(--pplp-primary);
  animation: pplp-pulse 2s infinite;
}
.pplp-bacen-text {
  font-size: 10px;
  color: var(--pplp-on-surface-variant);
  font-weight: 500;
}
.pplp-header-whatsapp {
  padding: 6px 12px;
  border-radius: 9999px;
  background-color: var(--pplp-surface-high);
  border: 1px solid rgba(60, 74, 66, 0.5);
  color: var(--pplp-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pplp-header-whatsapp:active {
  transform: scale(0.96);
  border-color: var(--pplp-primary);
}
.pplp-main {
  width: 100%;
  padding-top: 68px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pplp-hero-section {
  padding: 12px 16px 8px;
  position: relative;
}
.pplp-radial-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  background-color: rgba(78, 222, 163, 0.12);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.pplp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background-color: var(--pplp-surface-high);
  border: 1px solid rgba(78, 222, 163, 0.3);
  color: var(--pplp-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.pplp-ping-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pplp-primary);
  box-shadow: 0 0 6px var(--pplp-primary);
}
.pplp-hero-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--pplp-on-surface);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.pplp-hero-title-highlight {
  color: var(--pplp-primary);
}
.pplp-hero-sub {
  font-size: 12px;
  color: var(--pplp-on-surface-variant);
  line-height: 1.5;
  margin: 0;
}
.pplp-visual-card {
  margin-top: 16px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(78, 222, 163, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  background-color: var(--pplp-surface-low);
}
.pplp-visual-card--full-width {
  margin-left: -16px !important;
  margin-right: -16px !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.pplp-visual-card--full-width .pplp-visual-pill {
  left: 16px;
  right: 16px;
  bottom: 12px;
}
.pplp-visual-frame {
  position: relative;
  height: 220px;
  width: 100%;
  overflow: hidden;
  transition: height 0.25s ease;
}
.pplp-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.pplp-visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      var(--pplp-surface-low) 0%,
      rgba(22, 28, 36, 0.2) 60%,
      transparent 100%);
}
.pplp-visual-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background-color: rgba(14, 20, 28, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(78, 222, 163, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pplp-pill-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pplp-pill-left span:last-child {
  font-size: 11px;
  font-weight: 700;
  color: var(--pplp-on-surface);
}
.pplp-pill-right {
  font-size: 11px;
  font-weight: 800;
  color: var(--pplp-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pplp-benefits-section {
  padding: 8px 16px;
}
.pplp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pplp-benefit-card {
  padding: 12px 6px;
  border-radius: 16px;
  background-color: var(--pplp-surface-container);
  border: 1px solid rgba(60, 74, 66, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pplp-benefit-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background-color: rgba(78, 222, 163, 0.12);
  color: var(--pplp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.pplp-benefit-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--pplp-on-surface);
  line-height: 1.2;
}
.pplp-benefit-sub {
  font-size: 9px;
  color: var(--pplp-on-surface-variant);
  margin-top: 2px;
}
.pplp-simulador-section {
  padding: 8px 16px 16px;
}
.pplp-simulador-card {
  padding: 16px;
  border-radius: 24px;
  background-color: var(--pplp-surface-high);
  border: 1px solid rgba(60, 74, 66, 0.45);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}
.pplp-tab-group {
  display: flex;
  align-items: center;
  background-color: var(--pplp-surface-lowest);
  padding: 4px;
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(60, 74, 66, 0.25);
}
.pplp-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
  background: transparent;
  color: var(--pplp-on-surface-variant);
}
.pplp-tab-btn.active {
  background-color: var(--pplp-primary);
  color: var(--pplp-on-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.pplp-slider-box {
  background-color: var(--pplp-surface-container);
  padding: 14px;
  border-radius: 16px;
  margin-bottom: 12px;
}
.pplp-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pplp-slider-label {
  font-size: 12px;
  color: var(--pplp-on-surface-variant);
  font-weight: 600;
}
.pplp-slider-val {
  font-size: 17px;
  font-weight: 900;
  color: var(--pplp-primary);
}
.pplp-range-input {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  outline: none;
  background: var(--pplp-surface-highest);
  cursor: pointer;
  accent-color: var(--pplp-primary);
}
.pplp-slider-extremes {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(187, 202, 191, 0.7);
  margin-top: 6px;
}
.pplp-result-card {
  padding: 14px;
  border-radius: 16px;
  background-color: var(--pplp-surface-lowest);
  border: 1px solid rgba(78, 222, 163, 0.3);
  text-align: center;
  margin-bottom: 16px;
}
.pplp-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: rgba(78, 222, 163, 0.12);
  color: var(--pplp-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pplp-result-sub {
  font-size: 11px;
  color: var(--pplp-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin: 0;
}
.pplp-result-pix {
  font-size: 28px;
  font-weight: 900;
  color: var(--pplp-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.pplp-result-terms {
  font-size: 10px;
  color: var(--pplp-on-surface-variant);
  margin: 0;
}
.pplp-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pplp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pplp-field {
  display: flex;
  flex-direction: column;
}
.pplp-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--pplp-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.pplp-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: var(--pplp-surface-container);
  color: var(--pplp-on-surface);
  font-size: 12px;
  font-family: inherit;
  border: 1px solid rgba(60, 74, 66, 0.35);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.pplp-input:focus {
  border-color: var(--pplp-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(78, 222, 163, 0.2);
}
.pplp-input::placeholder {
  color: rgba(187, 202, 191, 0.4);
}
.pplp-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  background-color: var(--pplp-primary);
  color: var(--pplp-on-primary);
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
  margin-top: 4px;
}
.pplp-submit-btn:hover {
  background-color: #6ffbbe;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
}
.pplp-submit-btn:active {
  transform: scale(0.98);
}
.pplp-steps-section {
  padding: 4px 16px;
}
.pplp-steps-card {
  padding: 12px 14px;
  border-radius: 16px;
  background-color: var(--pplp-surface-container);
  border: 1px solid rgba(60, 74, 66, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: center;
}
.pplp-step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pplp-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(78, 222, 163, 0.18);
  color: var(--pplp-primary);
  font-weight: 900;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.pplp-step-num.final {
  background-color: var(--pplp-primary);
  color: var(--pplp-on-primary);
}
.pplp-step-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--pplp-on-surface);
  line-height: 1.2;
}
.pplp-step-title.final {
  color: var(--pplp-primary);
}
.pplp-step-arrow {
  color: var(--pplp-outline-variant);
  font-weight: 900;
  font-size: 13px;
}
.pplp-footer-section {
  padding: 16px;
  text-align: center;
}
.pplp-footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  color: rgba(221, 227, 238, 0.7);
  font-weight: 600;
  margin-bottom: 6px;
}
.pplp-footer-badge-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pplp-footer-badge-item .material-symbols-outlined {
  color: var(--pplp-primary);
  font-size: 14px;
}
.pplp-footer-disclaimer {
  font-size: 9px;
  color: rgba(187, 202, 191, 0.6);
  line-height: 1.4;
  margin: 0;
}
.pplp-footer-link {
  color: var(--pplp-primary);
  text-decoration: underline;
  margin-left: 4px;
}
.pplp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(14, 20, 28, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(78, 222, 163, 0.25);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
}
.pplp-sticky-inner {
  width: 100%;
  max-width: 480px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pplp-sticky-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pplp-sticky-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pplp-on-surface-variant);
  line-height: 1;
}
.pplp-sticky-val {
  font-size: 17px;
  font-weight: 900;
  color: var(--pplp-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pplp-sticky-cta {
  padding: 12px 18px;
  border-radius: 16px;
  background-color: var(--pplp-primary);
  color: var(--pplp-on-primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 15px rgba(16, 185, 129, 0.4);
  text-decoration: none;
  font-family: inherit;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.pplp-sticky-cta:hover {
  background-color: #6ffbbe;
}
.pplp-sticky-cta:active {
  transform: scale(0.96);
}
@keyframes pplp-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

/* src/components/LPPreview/LPPreview.css */
.pplp-preview-wrapper {
  min-height: auto !important;
  background-color: transparent !important;
  width: 100%;
}
.pplp-preview-wrapper .pplp-app-container {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto;
}
.lpb-center .pplp-header,
.pplp-preview-wrapper .pplp-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 40;
}
.lpb-center .pplp-sticky-bar,
.pplp-preview-wrapper .pplp-sticky-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 30;
}
.pplp-builder-block {
  position: relative;
  cursor: pointer;
  transition: all 0.18s ease;
}
.pplp-builder-block:hover {
  outline: 2px dashed rgba(56, 189, 248, 0.45);
  outline-offset: -2px;
}
.pplp-builder-block--hovered {
  outline: 3px dashed var(--primary, #00e676) !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 25px rgba(0, 230, 118, 0.35) inset, 0 0 30px rgba(0, 230, 118, 0.25) !important;
  position: relative;
  z-index: 50;
  transition: all 0.15s ease-in-out;
}
.pplp-builder-block--hovered::after {
  content: "\1f3af  Bloco em Foco";
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary, #00e676);
  color: #0b1320;
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 65;
  letter-spacing: 0.03em;
  animation: pplpPulseFocus 1.2s infinite alternate ease-in-out;
}
@keyframes pplpPulseFocus {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
.pplp-builder-block--selected {
  outline: 2px solid #38bdf8 !important;
  outline-offset: -2px;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.25) inset;
}
.pplp-builder-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #0284c7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}
.pplp-range-input {
  cursor: pointer;
}
.pplp-has-tag-inspector .pplp-builder-block {
  outline: 1px solid rgba(0, 230, 118, 0.25) !important;
  outline-offset: -1px;
}
.pplp-html-tag-inspector {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(10, 15, 25, 0.92);
  border: 1px solid rgba(0, 230, 118, 0.45);
  color: #00e676;
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  z-index: 55;
  pointer-events: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pplp-html-tag-inspector::before {
  content: "\1f3f7\fe0f";
  font-size: 9px;
}
.pplp-block-floating-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 19, 32, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.25);
  padding: 5px 8px 5px 12px;
  border-radius: 9999px;
  animation: pplpFloatingPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  user-select: none;
}
@keyframes pplpFloatingPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.pplp-floating-badge-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pplp-floating-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pplpDotGlow 1.2s infinite alternate ease-in-out;
}
@keyframes pplpDotGlow {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.2);
  }
}
.pplp-floating-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pplp-floating-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.pplp-floating-btn--eye {
  background: rgba(255, 171, 0, 0.15);
  border-color: rgba(255, 171, 0, 0.45);
  color: #fbbf24;
}
.pplp-floating-btn--eye:hover {
  background: #fbbf24;
  color: #0b1320;
  border-color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}
.pplp-floating-btn--delete {
  background: rgba(255, 77, 109, 0.18);
  border-color: rgba(255, 77, 109, 0.45);
  color: #ff6b81;
}
.pplp-floating-btn--delete:hover {
  background: #ff4d6d;
  color: #ffffff;
  border-color: #ff4d6d;
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.4);
}
.pplp-floating-btn--close {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  padding: 3px 6px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  justify-content: center;
}
.pplp-floating-btn--close:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* src/pages/Public/Templates/VenttuClaroLP.css */
@font-face {
  font-family: Poppins;
  src: url(/templates/venttu/Poppins-Regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url(/templates/venttu/Poppins-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url(/templates/venttu/Poppins-Bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}
.vnt-page-wrapper {
  --violet: #4e35ff;
  --violet-deep: #3826ce;
  --lime: #f1ff00;
  --ink: #1d1c31;
  --muted: #5e5c70;
  --paper: #faf9f6;
  --warm: #f4f1eb;
  --line: #dedbe5;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif !important;
  color: var(--ink);
  background: var(--paper);
  min-width: 320px;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
.vnt-page-wrapper,
.vnt-page-wrapper * {
  box-sizing: border-box;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif !important;
}
.vnt-page-wrapper button,
.vnt-page-wrapper input {
  font: inherit;
}
.vnt-page-wrapper button:disabled {
  opacity: 1;
  cursor: default;
}
.vnt-page-wrapper button:focus-visible,
.vnt-page-wrapper input:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}
.vnt-page-wrapper .site-header {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border-bottom: 1px solid #e8e5de;
}
.vnt-page-wrapper .header-inner {
  width: min(1232px, calc(100% - 64px));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vnt-page-wrapper .brand-panel {
  align-self: stretch;
  width: 205px;
  display: flex;
  align-items: center;
  padding: 0 30px 0 20px;
  background: var(--violet);
  clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0 100%);
}
.vnt-page-wrapper .brand-logo {
  display: block;
  width: 155px;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}
.vnt-page-wrapper .contact-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid #c9c3e6;
  border-radius: 7px;
  background: transparent;
  color: var(--violet-deep);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.vnt-page-wrapper .contact-button:hover {
  background: #f0edff;
  border-color: var(--violet);
}
.vnt-page-wrapper .contact-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vnt-page-wrapper .top-banner {
  width: min(1232px, calc(100% - 64px));
  aspect-ratio: 2464 / 288;
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--violet);
}
.vnt-page-wrapper .top-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.vnt-page-wrapper .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
}
.vnt-page-wrapper .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 43%;
  background: #efebff;
  clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%);
}
.vnt-page-wrapper .hero-inner {
  width: min(1232px, calc(100% - 64px));
  margin: 0 auto;
  padding: 39px 0 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 510px);
  grid-template-rows: 1fr auto;
  align-items: stretch;
  column-gap: 70px;
  row-gap: 0;
}
.vnt-page-wrapper .hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: 660px;
  padding-bottom: 0;
}
.vnt-page-wrapper .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 27px;
  color: var(--violet-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.vnt-page-wrapper .eyebrow-mark {
  width: 28px;
  height: 4px;
  display: inline-block;
  background: var(--violet);
  transform: skewX(-28deg);
}
.vnt-page-wrapper .hero h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(48px, 4.35vw, 61px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.052em;
  text-wrap: balance;
  color: var(--ink);
}
.vnt-page-wrapper .headline-accent {
  color: var(--violet);
  white-space: nowrap;
}
.vnt-page-wrapper .hero-summary {
  max-width: 540px;
  margin: 28px 0 0;
  color: #55536a;
  font-size: 17px;
  line-height: 1.62;
}
.vnt-page-wrapper .simulator {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ded9ed;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(48, 33, 115, .15);
}
.vnt-page-wrapper .simulator-input {
  padding: 27px 32px 34px;
  background: #fff;
}
.vnt-page-wrapper .simulator-assurances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 14px;
  color: #615b7a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
}
.vnt-page-wrapper .simulator-assurances span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: var(--violet);
}
.vnt-page-wrapper .product-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.vnt-page-wrapper .product-tab {
  min-width: 0;
  min-height: 47px;
  padding: 8px 12px;
  border: 1px solid #c9c4da;
  border-radius: 8px;
  background: #fff;
  color: #514d68;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease;
}
.vnt-page-wrapper .product-tab:hover {
  border-color: var(--violet);
  color: var(--violet-deep);
}
.vnt-page-wrapper .product-tab.active {
  border: 2px solid var(--violet);
  background: #f0edff;
  color: var(--violet-deep);
}
.vnt-page-wrapper .slider-field {
  padding-top: 29px;
}
.vnt-page-wrapper .slider-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vnt-page-wrapper .slider-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.vnt-page-wrapper .slider-value {
  color: var(--ink);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.042em;
  font-variant-numeric: tabular-nums;
}
.vnt-page-wrapper .amount-range {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  margin: 30px 0 12px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      to right,
      var(--violet) var(--progress, 16%),
      #e9e6ef var(--progress, 16%));
  cursor: pointer;
}
.vnt-page-wrapper .amount-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: 6px solid var(--violet);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(44, 27, 131, 0.32);
}
.vnt-page-wrapper .amount-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 6px solid var(--violet);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(44, 27, 131, 0.32);
}
.vnt-page-wrapper .range-limits {
  display: flex;
  justify-content: space-between;
  color: #6e6b7e;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.vnt-page-wrapper .simulator-result {
  position: relative;
  padding: 27px 32px 31px;
  background: var(--violet);
  color: #fff;
}
.vnt-page-wrapper .availability {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 5px;
  background: var(--lime);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.35;
  text-transform: uppercase;
}
.vnt-page-wrapper .availability-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--violet-deep);
}
.vnt-page-wrapper .result-label {
  margin: 20px 0 3px;
  color: #e4deff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vnt-page-wrapper .result-amount {
  display: block;
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.vnt-page-wrapper .result-terms {
  margin: 8px 0 0;
  color: #e4deff;
  font-size: 12px;
  line-height: 1.45;
}
.vnt-page-wrapper .primary-cta {
  width: 100%;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 25px;
  padding: 13px 18px;
  border: 0;
  border-radius: 7px;
  background: var(--lime);
  color: #1a1930;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.2s ease;
}
.vnt-page-wrapper .primary-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.vnt-page-wrapper .primary-cta:active {
  transform: translateY(0);
}
.vnt-page-wrapper .primary-cta svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vnt-page-wrapper .benefits {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  background: transparent;
}
.vnt-page-wrapper .benefits-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.12fr 1fr 1fr;
  gap: 16px;
}
.vnt-page-wrapper .benefit {
  min-width: 0;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 18px 0 0;
  border-top: 1px solid #d8d4e0;
}
.vnt-page-wrapper .benefit-title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.22;
}
.vnt-page-wrapper .benefit:first-child .benefit-title {
  color: var(--violet-deep);
  font-size: 20px;
}
.vnt-page-wrapper .benefit-sub {
  color: #6e6b7e;
  font-size: 11px;
}
.vnt-page-wrapper .journey {
  background: var(--warm);
}
.vnt-page-wrapper .journey-inner {
  width: min(1232px, calc(100% - 64px));
  margin: 0 auto;
  padding: 68px 0 76px;
}
.vnt-page-wrapper .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #cfcbd4;
  border-bottom: 1px solid #cfcbd4;
}
.vnt-page-wrapper .step {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  min-height: 148px;
  padding: 22px 28px;
}
.vnt-page-wrapper .step:first-child {
  padding-left: 0;
}
.vnt-page-wrapper .step + .step {
  border-left: 1px solid #cfcbd4;
}
.vnt-page-wrapper .step-number {
  color: var(--violet);
  font-size: 59px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.07em;
}
.vnt-page-wrapper .step-title {
  max-width: 270px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.035em;
}
.vnt-page-wrapper .site-footer {
  background: var(--paper);
  border-top: 1px solid #e5e1dc;
}
.vnt-page-wrapper .footer-inner {
  width: min(1232px, calc(100% - 64px));
  margin: 0 auto;
  padding: 36px 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.vnt-page-wrapper .footer-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: #626070;
  font-size: 12px;
  font-weight: 600;
}
.vnt-page-wrapper .footer-separator {
  color: #a8a4b5;
}
.vnt-page-wrapper .footer-inner p {
  margin: 0;
  color: #6e6b7e;
  font-size: 11px;
  line-height: 1.7;
  text-align: right;
}
.vnt-page-wrapper .privacy-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}
@media (max-width: 1120px) {
  .vnt-page-wrapper .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 470px);
    gap: 42px;
  }
  .vnt-page-wrapper .hero h1 {
    font-size: clamp(45px, 5vw, 58px);
  }
  .vnt-page-wrapper .step {
    gap: 16px;
    padding: 20px;
  }
  .vnt-page-wrapper .step-title {
    font-size: 18px;
  }
}
@media (max-width: 900px) {
  .vnt-page-wrapper .top-banner {
    width: min(680px, calc(100% - 48px));
  }
  .vnt-page-wrapper .hero::before {
    top: 50%;
    width: 100%;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }
  .vnt-page-wrapper .hero-inner {
    width: min(680px, calc(100% - 48px));
    padding: 36px 0 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .vnt-page-wrapper .hero-copy {
    max-width: 650px;
  }
  .vnt-page-wrapper .hero h1 {
    max-width: 620px;
    font-size: clamp(45px, 6.7vw, 61px);
  }
  .vnt-page-wrapper .simulator {
    max-width: 600px;
  }
  .vnt-page-wrapper .benefits {
    width: 100%;
    margin-top: -4px;
    padding: 22px 24px 12px;
    background: #fff;
    border: 1px solid #e9e5e1;
    border-bottom: 0;
  }
  .vnt-page-wrapper .benefits-inner {
    gap: 18px;
  }
  .vnt-page-wrapper .benefit-title {
    font-size: 17px;
  }
  .vnt-page-wrapper .benefit:first-child .benefit-title {
    font-size: 19px;
  }
  .vnt-page-wrapper .journey-inner {
    width: min(680px, calc(100% - 48px));
    padding: 66px 0;
  }
  .vnt-page-wrapper .steps {
    display: block;
  }
  .vnt-page-wrapper .step {
    min-height: 116px;
    padding: 20px 0;
  }
  .vnt-page-wrapper .step + .step {
    border-left: 0;
    border-top: 1px solid #cfcbd4;
  }
  .vnt-page-wrapper .step-title {
    max-width: none;
    font-size: 21px;
  }
  .vnt-page-wrapper .footer-inner {
    width: min(680px, calc(100% - 48px));
  }
}
@media (max-width: 640px) {
  .vnt-page-wrapper .header-inner {
    width: calc(100% - 36px);
    height: 68px;
  }
  .vnt-page-wrapper .brand-panel {
    width: 168px;
    padding: 0 26px 0 13px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  }
  .vnt-page-wrapper .brand-logo {
    width: 131px;
  }
  .vnt-page-wrapper .contact-button {
    min-height: 36px;
    padding: 6px 11px;
    font-size: 12px;
  }
  .vnt-page-wrapper .contact-button svg {
    width: 15px;
    height: 15px;
  }
  .vnt-page-wrapper .top-banner {
    width: calc(100% - 36px);
    aspect-ratio: 1062 / 336;
    margin-top: 15px;
    border-radius: 9px;
  }
  .vnt-page-wrapper .hero::before {
    top: 43%;
    width: 100%;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }
  .vnt-page-wrapper .hero-inner {
    width: calc(100% - 36px);
    padding: 24px 0 0;
    gap: 29px;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .vnt-page-wrapper .hero-eyebrow {
    margin-bottom: 18px;
    gap: 9px;
    font-size: 10px;
  }
  .vnt-page-wrapper .eyebrow-mark {
    width: 22px;
  }
  .vnt-page-wrapper .hero h1 {
    font-size: 34px;
    line-height: 1.095;
    letter-spacing: -.05em;
    max-width: 100%;
  }
  .vnt-page-wrapper .headline-accent {
    white-space: nowrap;
  }
  .vnt-page-wrapper .hero-summary {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.58;
    max-width: 100%;
  }
  .vnt-page-wrapper .simulator {
    border-radius: 15px;
    box-shadow: 0 17px 38px rgba(48, 33, 115, .13);
    width: 100%;
    max-width: 100%;
    grid-column: auto;
    grid-row: auto;
  }
  .vnt-page-wrapper .simulator-input {
    padding: 21px 22px 27px;
  }
  .vnt-page-wrapper .simulator-assurances {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .vnt-page-wrapper .product-switch {
    gap: 8px;
  }
  .vnt-page-wrapper .product-tab {
    min-height: 45px;
    padding: 7px 5px;
    font-size: 12px;
  }
  .vnt-page-wrapper .slider-field {
    padding-top: 22px;
  }
  .vnt-page-wrapper .slider-label {
    font-size: 13px;
  }
  .vnt-page-wrapper .slider-value {
    font-size: 33px;
  }
  .vnt-page-wrapper .amount-range {
    margin-top: 24px;
  }
  .vnt-page-wrapper .simulator-result {
    padding: 23px 22px 24px;
  }
  .vnt-page-wrapper .availability {
    padding: 6px 8px;
    font-size: 9px;
  }
  .vnt-page-wrapper .result-label {
    margin-top: 17px;
  }
  .vnt-page-wrapper .result-amount {
    font-size: 43px;
  }
  .vnt-page-wrapper .result-terms {
    font-size: 11px;
  }
  .vnt-page-wrapper .primary-cta {
    min-height: 51px;
    margin-top: 21px;
    font-size: 13px;
  }
  .vnt-page-wrapper .benefits {
    align-self: flex-start;
    width: calc(100% + 36px);
    margin: 0 0 0 -18px;
    padding: 14px 18px;
    border-left: 0;
    border-right: 0;
    grid-column: auto;
    grid-row: auto;
    background: transparent;
  }
  .vnt-page-wrapper .benefits-inner {
    display: block;
    width: 100%;
  }
  .vnt-page-wrapper .benefit {
    min-height: 91px;
    padding: 19px 0 16px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .vnt-page-wrapper .benefit:first-child {
    border-top: 0;
  }
  .vnt-page-wrapper .benefit-title,
  .vnt-page-wrapper .benefit:first-child .benefit-title {
    font-size: 21px;
  }
  .vnt-page-wrapper .benefit-sub {
    font-size: 12px;
  }
  .vnt-page-wrapper .journey-inner {
    width: calc(100% - 36px);
    padding: 54px 0 62px;
  }
  .vnt-page-wrapper .steps {
    display: block;
  }
  .vnt-page-wrapper .step {
    min-height: 105px;
    gap: 20px;
    padding: 20px 0;
    display: flex;
    align-items: center;
  }
  .vnt-page-wrapper .step + .step {
    border-left: 0;
    border-top: 1px solid #cfcbd4;
  }
  .vnt-page-wrapper .step-number {
    font-size: 47px;
  }
  .vnt-page-wrapper .step-title {
    font-size: 19px;
    max-width: none;
  }
  .vnt-page-wrapper .footer-inner {
    width: calc(100% - 36px);
    padding: 29px 0 34px;
    display: block;
  }
  .vnt-page-wrapper .footer-trust {
    gap: 7px;
    font-size: 11px;
  }
  .vnt-page-wrapper .footer-inner p {
    margin-top: 13px;
    font-size: 10px;
    text-align: left;
  }
}
.vnt-page-wrapper.vnt-mobile-view .header-inner,
.lpb-phone-screen .vnt-page-wrapper .header-inner,
.ple-phone-container .vnt-page-wrapper .header-inner {
  width: calc(100% - 36px) !important;
  height: 68px !important;
}
.vnt-page-wrapper.vnt-mobile-view .brand-panel,
.lpb-phone-screen .vnt-page-wrapper .brand-panel,
.ple-phone-container .vnt-page-wrapper .brand-panel {
  width: 168px !important;
  padding: 0 26px 0 13px !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%) !important;
}
.vnt-page-wrapper.vnt-mobile-view .brand-logo,
.lpb-phone-screen .vnt-page-wrapper .brand-logo,
.ple-phone-container .vnt-page-wrapper .brand-logo {
  width: 131px !important;
}
.vnt-page-wrapper.vnt-mobile-view .contact-button,
.lpb-phone-screen .vnt-page-wrapper .contact-button,
.ple-phone-container .vnt-page-wrapper .contact-button {
  min-height: 36px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
}
.vnt-page-wrapper.vnt-mobile-view .contact-button svg,
.lpb-phone-screen .vnt-page-wrapper .contact-button svg,
.ple-phone-container .vnt-page-wrapper .contact-button svg {
  width: 15px !important;
  height: 15px !important;
}
.vnt-page-wrapper.vnt-mobile-view .top-banner,
.lpb-phone-screen .vnt-page-wrapper .top-banner,
.ple-phone-container .vnt-page-wrapper .top-banner {
  width: calc(100% - 36px) !important;
  aspect-ratio: 1062 / 336 !important;
  margin-top: 15px !important;
  border-radius: 9px !important;
}
.vnt-page-wrapper.vnt-mobile-view .hero::before,
.lpb-phone-screen .vnt-page-wrapper .hero::before,
.ple-phone-container .vnt-page-wrapper .hero::before {
  top: 43% !important;
  width: 100% !important;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%) !important;
}
.vnt-page-wrapper.vnt-mobile-view .hero-inner,
.lpb-phone-screen .vnt-page-wrapper .hero-inner,
.ple-phone-container .vnt-page-wrapper .hero-inner {
  width: calc(100% - 36px) !important;
  padding: 24px 0 0 !important;
  gap: 29px !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
.vnt-page-wrapper.vnt-mobile-view .hero-copy,
.lpb-phone-screen .vnt-page-wrapper .hero-copy,
.ple-phone-container .vnt-page-wrapper .hero-copy {
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 !important;
}
.vnt-page-wrapper.vnt-mobile-view .hero-eyebrow,
.lpb-phone-screen .vnt-page-wrapper .hero-eyebrow,
.ple-phone-container .vnt-page-wrapper .hero-eyebrow {
  margin-bottom: 18px !important;
  gap: 9px !important;
  font-size: 10px !important;
}
.vnt-page-wrapper.vnt-mobile-view .eyebrow-mark,
.lpb-phone-screen .vnt-page-wrapper .eyebrow-mark,
.ple-phone-container .vnt-page-wrapper .eyebrow-mark {
  width: 22px !important;
}
.vnt-page-wrapper.vnt-mobile-view .hero h1,
.lpb-phone-screen .vnt-page-wrapper .hero h1,
.ple-phone-container .vnt-page-wrapper .hero h1 {
  font-size: 34px !important;
  line-height: 1.095 !important;
  letter-spacing: -.05em !important;
  max-width: 100% !important;
}
.vnt-page-wrapper.vnt-mobile-view .headline-accent,
.lpb-phone-screen .vnt-page-wrapper .headline-accent,
.ple-phone-container .vnt-page-wrapper .headline-accent {
  white-space: nowrap !important;
}
.vnt-page-wrapper.vnt-mobile-view .hero-summary,
.lpb-phone-screen .vnt-page-wrapper .hero-summary,
.ple-phone-container .vnt-page-wrapper .hero-summary {
  margin-top: 18px !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  max-width: 100% !important;
}
.vnt-page-wrapper.vnt-mobile-view .simulator,
.lpb-phone-screen .vnt-page-wrapper .simulator,
.ple-phone-container .vnt-page-wrapper .simulator {
  border-radius: 15px !important;
  box-shadow: 0 17px 38px rgba(48, 33, 115, .13) !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
.vnt-page-wrapper.vnt-mobile-view .simulator-input,
.lpb-phone-screen .vnt-page-wrapper .simulator-input,
.ple-phone-container .vnt-page-wrapper .simulator-input {
  padding: 21px 22px 27px !important;
}
.vnt-page-wrapper.vnt-mobile-view .simulator-assurances,
.lpb-phone-screen .vnt-page-wrapper .simulator-assurances,
.ple-phone-container .vnt-page-wrapper .simulator-assurances {
  font-size: 10px !important;
  margin-bottom: 12px !important;
}
.vnt-page-wrapper.vnt-mobile-view .product-switch,
.lpb-phone-screen .vnt-page-wrapper .product-switch,
.ple-phone-container .vnt-page-wrapper .product-switch {
  gap: 8px !important;
}
.vnt-page-wrapper.vnt-mobile-view .product-tab,
.lpb-phone-screen .vnt-page-wrapper .product-tab,
.ple-phone-container .vnt-page-wrapper .product-tab {
  min-height: 45px !important;
  padding: 7px 5px !important;
  font-size: 12px !important;
}
.vnt-page-wrapper.vnt-mobile-view .slider-field,
.lpb-phone-screen .vnt-page-wrapper .slider-field,
.ple-phone-container .vnt-page-wrapper .slider-field {
  padding-top: 22px !important;
}
.vnt-page-wrapper.vnt-mobile-view .slider-label,
.lpb-phone-screen .vnt-page-wrapper .slider-label,
.ple-phone-container .vnt-page-wrapper .slider-label {
  font-size: 13px !important;
}
.vnt-page-wrapper.vnt-mobile-view .slider-value,
.lpb-phone-screen .vnt-page-wrapper .slider-value,
.ple-phone-container .vnt-page-wrapper .slider-value {
  font-size: 33px !important;
}
.vnt-page-wrapper.vnt-mobile-view .amount-range,
.lpb-phone-screen .vnt-page-wrapper .amount-range,
.ple-phone-container .vnt-page-wrapper .amount-range {
  margin-top: 24px !important;
}
.vnt-page-wrapper.vnt-mobile-view .simulator-result,
.lpb-phone-screen .vnt-page-wrapper .simulator-result,
.ple-phone-container .vnt-page-wrapper .simulator-result {
  padding: 23px 22px 24px !important;
}
.vnt-page-wrapper.vnt-mobile-view .availability,
.lpb-phone-screen .vnt-page-wrapper .availability,
.ple-phone-container .vnt-page-wrapper .availability {
  padding: 6px 8px !important;
  font-size: 9px !important;
}
.vnt-page-wrapper.vnt-mobile-view .result-label,
.lpb-phone-screen .vnt-page-wrapper .result-label,
.ple-phone-container .vnt-page-wrapper .result-label {
  margin-top: 17px !important;
}
.vnt-page-wrapper.vnt-mobile-view .result-amount,
.lpb-phone-screen .vnt-page-wrapper .result-amount,
.ple-phone-container .vnt-page-wrapper .result-amount {
  font-size: 43px !important;
}
.vnt-page-wrapper.vnt-mobile-view .result-terms,
.lpb-phone-screen .vnt-page-wrapper .result-terms,
.ple-phone-container .vnt-page-wrapper .result-terms {
  font-size: 11px !important;
}
.vnt-page-wrapper.vnt-mobile-view .primary-cta,
.lpb-phone-screen .vnt-page-wrapper .primary-cta,
.ple-phone-container .vnt-page-wrapper .primary-cta {
  min-height: 51px !important;
  margin-top: 21px !important;
  font-size: 13px !important;
}
.vnt-page-wrapper.vnt-mobile-view .benefits,
.lpb-phone-screen .vnt-page-wrapper .benefits,
.ple-phone-container .vnt-page-wrapper .benefits {
  align-self: flex-start !important;
  width: calc(100% + 36px) !important;
  margin: 0 0 0 -18px !important;
  padding: 14px 18px !important;
  border-left: 0 !important;
  border-right: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  background: transparent !important;
}
.vnt-page-wrapper.vnt-mobile-view .benefits-inner,
.lpb-phone-screen .vnt-page-wrapper .benefits-inner,
.ple-phone-container .vnt-page-wrapper .benefits-inner {
  display: block !important;
  width: 100% !important;
}
.vnt-page-wrapper.vnt-mobile-view .benefit,
.lpb-phone-screen .vnt-page-wrapper .benefit,
.ple-phone-container .vnt-page-wrapper .benefit {
  min-height: 91px !important;
  padding: 19px 0 16px !important;
  border-top: 1px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.vnt-page-wrapper.vnt-mobile-view .benefit:first-child,
.lpb-phone-screen .vnt-page-wrapper .benefit:first-child,
.ple-phone-container .vnt-page-wrapper .benefit:first-child {
  border-top: 0 !important;
}
.vnt-page-wrapper.vnt-mobile-view .benefit-title,
.vnt-page-wrapper.vnt-mobile-view .benefit:first-child .benefit-title,
.lpb-phone-screen .vnt-page-wrapper .benefit-title,
.lpb-phone-screen .vnt-page-wrapper .benefit:first-child .benefit-title,
.ple-phone-container .vnt-page-wrapper .benefit-title,
.ple-phone-container .vnt-page-wrapper .benefit:first-child .benefit-title {
  font-size: 21px !important;
}
.vnt-page-wrapper.vnt-mobile-view .benefit-sub,
.lpb-phone-screen .vnt-page-wrapper .benefit-sub,
.ple-phone-container .vnt-page-wrapper .benefit-sub {
  font-size: 12px !important;
}
.vnt-page-wrapper.vnt-mobile-view .journey-inner,
.lpb-phone-screen .vnt-page-wrapper .journey-inner,
.ple-phone-container .vnt-page-wrapper .journey-inner {
  width: calc(100% - 36px) !important;
  padding: 54px 0 62px !important;
}
.vnt-page-wrapper.vnt-mobile-view .steps,
.lpb-phone-screen .vnt-page-wrapper .steps,
.ple-phone-container .vnt-page-wrapper .steps {
  display: block !important;
}
.vnt-page-wrapper.vnt-mobile-view .step,
.lpb-phone-screen .vnt-page-wrapper .step,
.ple-phone-container .vnt-page-wrapper .step {
  min-height: 105px !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  display: flex !important;
  align-items: center !important;
}
.vnt-page-wrapper.vnt-mobile-view .step + .step,
.lpb-phone-screen .vnt-page-wrapper .step + .step,
.ple-phone-container .vnt-page-wrapper .step + .step {
  border-left: 0 !important;
  border-top: 1px solid #cfcbd4 !important;
}
.vnt-page-wrapper.vnt-mobile-view .step-number,
.lpb-phone-screen .vnt-page-wrapper .step-number,
.ple-phone-container .vnt-page-wrapper .step-number {
  font-size: 47px !important;
}
.vnt-page-wrapper.vnt-mobile-view .step-title,
.lpb-phone-screen .vnt-page-wrapper .step-title,
.ple-phone-container .vnt-page-wrapper .step-title {
  font-size: 19px !important;
  max-width: none !important;
}
.vnt-page-wrapper.vnt-mobile-view .footer-inner,
.lpb-phone-screen .vnt-page-wrapper .footer-inner,
.ple-phone-container .vnt-page-wrapper .footer-inner {
  width: calc(100% - 36px) !important;
  padding: 29px 0 34px !important;
  display: block !important;
}
.vnt-page-wrapper.vnt-mobile-view .footer-trust,
.lpb-phone-screen .vnt-page-wrapper .footer-trust,
.ple-phone-container .vnt-page-wrapper .footer-trust {
  gap: 7px !important;
  font-size: 11px !important;
}
.vnt-page-wrapper.vnt-mobile-view .footer-inner p,
.lpb-phone-screen .vnt-page-wrapper .footer-inner p,
.ple-phone-container .vnt-page-wrapper .footer-inner p {
  margin-top: 13px !important;
  font-size: 10px !important;
  text-align: left !important;
}
@media (max-width: 380px) {
  .vnt-page-wrapper .hero h1 {
    font-size: 33px;
  }
  .vnt-page-wrapper .result-amount {
    font-size: 39px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vnt-page-wrapper,
  .vnt-page-wrapper *,
  .vnt-page-wrapper *::before,
  .vnt-page-wrapper *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* src/pages/LPBuilder/LPBuilder.css */
.lpb-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #0d1117;
  color: #e2e8f0;
  font-family: var(--font-primary, "Inter", sans-serif);
}
.lpb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
  color: rgba(226, 232, 240, 0.5);
  font-size: 14px;
}
.lpb-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(74, 255, 197, 0.15);
  border-top-color: #4AFFC5;
  border-radius: 50%;
  animation: lpb-spin 0.7s linear infinite;
}
@keyframes lpb-spin {
  to {
    transform: rotate(360deg);
  }
}
.lpb-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  background: #111827;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  z-index: 10;
}
.lpb-toolbar-back {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.lpb-toolbar-back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
.lpb-toolbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lpb-toolbar-label {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpb-dirty-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  animation: lpb-blink 1.5s ease-in-out infinite;
}
@keyframes lpb-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.lpb-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lpb-device-toggle {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.lpb-device-btn {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: rgba(226, 232, 240, 0.5);
  transition: all 0.15s ease;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.lpb-device-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}
.lpb-device-btn.active {
  background: rgba(78, 222, 163, 0.15);
  color: #4edea3;
  font-weight: 700;
}
.lpb-toolbar-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.lpb-toolbar-btn--link {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
}
.lpb-toolbar-btn--link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.lpb-toolbar-btn--save {
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  border-color: rgba(74, 255, 197, 0.25);
}
.lpb-toolbar-btn--save:hover {
  background: rgba(74, 255, 197, 0.2);
}
.lpb-toolbar-btn--saving {
  background: rgba(255, 255, 255, 0.04);
  color: #64748b;
  cursor: default;
}
.lpb-toolbar-btn--publish {
  background: #4AFFC5;
  color: #0a0a0f;
  border-color: transparent;
}
.lpb-toolbar-btn--publish:hover {
  background: #2dd4a9;
}
.lpb-toolbar-btn--unpublish {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.25);
}
.lpb-toolbar-btn--unpublish:hover {
  background: rgba(245, 158, 11, 0.25);
}
.lpb-body {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.lpb-left {
  background: #111827;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lpb-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}
.lpb-palette-toggle {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.lpb-palette-toggle:hover {
  background: rgba(74, 255, 197, 0.18);
}
.lpb-palette {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(74, 255, 197, 0.03);
  flex-shrink: 0;
}
.lpb-palette-hint {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.35);
  margin: 0 0 8px;
}
.lpb-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  margin-bottom: 4px;
  font-family: inherit;
}
.lpb-palette-item:hover {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
}
.lpb-blocks-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lpb-blocks-list::-webkit-scrollbar {
  width: 4px;
}
.lpb-blocks-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.lpb-block-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.lpb-block-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.lpb-block-item--selected {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.3);
}
.lpb-block-drag {
  color: rgba(226, 232, 240, 0.25);
  font-size: 16px;
  cursor: grab;
  flex-shrink: 0;
}
.lpb-block-drag:active {
  cursor: grabbing;
}
.lpb-block-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.lpb-block-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpb-block-remove {
  background: none;
  border: none;
  color: rgba(226, 232, 240, 0.2);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
  font-family: inherit;
}
.lpb-block-remove:hover {
  color: #f87171;
}
.lpb-center {
  background:
    radial-gradient(
      circle at 50% 20%,
      #151d28 0%,
      #090d14 100%);
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  min-height: calc(100vh - 60px);
}
.lpb-center::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.lpb-center::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.lpb-phone-mockup {
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  height: 800px;
  max-height: calc(100vh - 100px);
  background: #0e141c;
  border-radius: 48px;
  border: 11px solid #1e242d;
  outline: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px #090d13,
    0 25px 60px -15px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(78, 222, 163, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  margin: auto;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lpb-phone-mockup::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 110px;
  width: 3px;
  height: 48px;
  background: #334155;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 65px 0 #334155;
}
.lpb-phone-mockup::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 135px;
  width: 3px;
  height: 64px;
  background: #334155;
  border-radius: 0 2px 2px 0;
}
.lpb-phone-island-bar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background-color: rgba(14, 20, 28, 0.95);
  backdrop-filter: blur(12px);
  z-index: 50;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  user-select: none;
}
.lpb-phone-time {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
}
.lpb-phone-island {
  width: 90px;
  height: 20px;
  background-color: #000000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.lpb-phone-camera {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0b1320;
  border: 1px solid #1a2233;
}
.lpb-phone-island-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cbd5e1;
}
.lpb-phone-screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.lpb-phone-screen::-webkit-scrollbar {
  width: 4px;
}
.lpb-phone-screen::-webkit-scrollbar-track {
  background: transparent;
}
.lpb-phone-screen::-webkit-scrollbar-thumb {
  background: rgba(78, 222, 163, 0.25);
  border-radius: 2px;
}
.lpb-phone-screen::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 222, 163, 0.5);
}
.lpb-phone-screen .pplp-preview-wrapper .pplp-app-container {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
}
.lpb-phone-home-indicator {
  height: 18px;
  background-color: rgba(14, 20, 28, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 50;
  user-select: none;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.lpb-phone-home-bar {
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}
.lpb-preview-wrap--mobile-full {
  width: 420px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.6);
  background: var(--pplp-bg, #0e141c);
  transition: width 0.3s ease;
}
.lpb-preview-wrap--desktop {
  width: 100%;
  max-width: 860px;
  transition: width 0.3s, box-shadow 0.3s;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.6);
}
.lpb-preview-scroll {
  overflow-x: hidden;
}
.lpb-right {
  background: #111827;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lpb-right-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.lpb-right-header > span:first-child {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}
.lpb-panel-tabs {
  display: flex;
  gap: 0;
  border-bottom: none;
}
.lpb-panel-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.lpb-panel-tab:hover {
  color: #94a3b8;
}
.lpb-panel-tab.active {
  color: #4AFFC5;
  border-bottom-color: #4AFFC5;
}
.lpb-right-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.lpb-right-body::-webkit-scrollbar {
  width: 4px;
}
.lpb-right-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.lpb-right-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.lpb-remove-block-btn {
  width: 100%;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: #f87171;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.lpb-remove-block-btn:hover {
  background: rgba(248, 113, 113, 0.18);
}
.lpb-right-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: rgba(226, 232, 240, 0.2);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}
.lpb-right-empty span:first-child {
  font-size: 32px;
}
.lpb-block-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lpb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpb-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lpb-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.lpb-input:focus {
  border-color: rgba(74, 255, 197, 0.35);
}
.lpb-textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  line-height: 1.5;
}
.lpb-textarea:focus {
  border-color: rgba(74, 255, 197, 0.35);
}
.lpb-code {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #a3e635;
  font-family:
    "Fira Code",
    "Consolas",
    monospace;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.lpb-code:focus {
  border-color: rgba(74, 255, 197, 0.35);
}
.lpb-hint {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.3);
  line-height: 1.5;
}
.lpb-hint code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
}
.lpb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.lpb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: rgba(74, 255, 197, 0.1);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 999px;
  padding: 4px 10px;
}
.lpb-chip button {
  background: none;
  border: none;
  color: rgba(74, 255, 197, 0.6);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.lpb-chip button:hover {
  color: #f87171;
}
.lpb-inline-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lpb-add-btn {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  font-family: inherit;
}
.lpb-add-btn:hover {
  background: rgba(74, 255, 197, 0.18);
}
.lpb-stats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.lpb-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}
.lpb-stat-row strong {
  color: #4AFFC5;
  min-width: 60px;
}
.lpb-stat-row span {
  flex: 1;
  color: #94a3b8;
}
.lpb-stat-row button {
  background: none;
  border: none;
  color: rgba(248, 113, 113, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.lpb-stat-row button:hover {
  color: #f87171;
}
.lpb-stat-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpb-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.lpb-faq-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px 12px;
}
.lpb-faq-q {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.lpb-faq-a {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 8px;
  line-height: 1.5;
}
.lpb-faq-remove {
  background: none;
  border: none;
  font-size: 11px;
  color: rgba(248, 113, 113, 0.5);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.lpb-faq-remove:hover {
  color: #f87171;
}
.lpb-faq-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpb-section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}
.lpb-autodig {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpb-design-row {
  display: flex;
  gap: 12px;
}
.lpb-design-row .lpb-field {
  flex: 1;
}
.lpb-color-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lpb-color-wrap input[type=color] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.lpb-input--small {
  font-family: "Fira Code", monospace;
  font-size: 11px;
  padding: 4px 8px;
}
.lpb-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.lpb-range-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lpb-range-wrap input[type=range] {
  flex: 1;
  accent-color: #4AFFC5;
}
.lpb-range-wrap span {
  font-size: 12px;
  font-weight: 600;
  color: #4AFFC5;
  min-width: 36px;
}
.lpb-toggle-group {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lpb-toggle-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 6px;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.lpb-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}
.lpb-toggle-btn.active {
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
}
.lpb-toggle-group--full {
  width: 100%;
}
.lpb-gradient-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
}
.lpb-range {
  width: 100%;
  accent-color: #4AFFC5;
  cursor: pointer;
}
.lpb-direction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.lpb-dir-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lpb-dir-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.lpb-dir-btn.active {
  background: rgba(74, 255, 197, 0.15);
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.lpb-dir-btn--disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
.lpb-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: #475569;
  user-select: none;
}
.lpb-mid-color-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.lpb-toggle-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lpb-toggle-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.lpb-toggle-pill.active {
  background: rgba(74, 255, 197, 0.12);
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.lpb-range--opacity {
  background: repeating-conic-gradient(#334155 0% 25%, #1e293b 0% 50%) 0 0 / 10px 10px;
  border-radius: 4px;
  height: 10px;
}
.lpb-image-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpb-image-preview {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}
.lpb-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lpb-image-preview button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.lpb-image-controls {
  display: flex;
  gap: 8px;
}
.lpb-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.lpb-upload-label:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
.lpb-autodig-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lpb-autodig-hint {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.3);
  line-height: 1.5;
}
.lpb-autodig-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpb-autodig-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(74, 255, 197, 0.05);
  border: 1px solid rgba(74, 255, 197, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
}
.lpb-autodig-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lpb-autodig-item-produto {
  font-size: 10px;
  font-weight: 700;
  color: #4AFFC5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lpb-autodig-item-tabela {
  font-size: 12px;
  font-weight: 500;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpb-autodig-item-cod {
  font-size: 10px;
  color: #64748b;
  font-family: "Courier New", monospace;
}
.lpb-autodig-remove {
  background: none;
  border: none;
  color: rgba(248, 113, 113, 0.4);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
  transition: color 0.15s;
}
.lpb-autodig-remove:hover {
  color: #f87171;
}
.lpb-autodig-add-wrap {
  position: relative;
}
.lpb-autodig-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.lpb-autodig-dropdown::-webkit-scrollbar {
  width: 4px;
}
.lpb-autodig-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.lpb-autodig-group {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 8px 3px;
  margin: 0;
}
.lpb-autodig-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  position: relative;
}
.lpb-autodig-option:hover:not(:disabled) {
  background: rgba(74, 255, 197, 0.08);
}
.lpb-autodig-option--added {
  opacity: 0.45;
  cursor: default;
}
.lpb-autodig-option > span:first-child {
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
}
.lpb-autodig-option-cod {
  font-size: 10px;
  color: #64748b;
  font-family: "Courier New", monospace;
}
.lpb-autodig-option-check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #4AFFC5;
}
.lpb-autodig-empty {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  padding: 12px;
  margin: 0;
}

/* src/pages/ResetPassword/ResetPassword.css */
.rp-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #0f1117);
  padding: 24px 16px;
}
.rp-card {
  background: var(--color-surface, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  animation: rp-appear 0.3s ease;
}
@keyframes rp-appear {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.rp-logo {
  margin-bottom: 20px;
}
.rp-logo-img {
  height: 32px;
}
.rp-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.rp-icon-error {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.rp-icon-success {
  font-size: 48px;
  margin-bottom: 12px;
}
.rp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: -0.3px;
}
.rp-desc {
  font-size: 14px;
  color: var(--color-text-secondary, #94a3b8);
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.55;
}
.rp-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
}
.rp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rp-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 42px 11px 14px;
  font-size: 14px;
  color: var(--color-text, #e2e8f0);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.rp-input::placeholder {
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.5;
}
.rp-input:focus {
  border-color: rgba(0, 198, 167, 0.5);
  background: rgba(0, 198, 167, 0.04);
}
.rp-input-error {
  border-color: rgba(255, 77, 109, 0.5) !important;
}
.rp-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-secondary, #94a3b8);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.rp-eye:hover {
  color: var(--color-text, #e2e8f0);
}
.rp-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.rp-strength-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.rp-strength-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s, background 0.3s;
}
.rp-strength-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 48px;
  text-align: right;
}
.rp-criteria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: 4px;
}
.rp-criterion {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.rp-criterion.valid {
  color: #4affc5;
  opacity: 1;
}
.rp-field-error {
  font-size: 12px;
  color: #FF4D6D;
  margin-top: 2px;
}
.rp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #FF4D6D;
}
.rp-btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #00C6A7,
      #0099a8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  margin-top: 4px;
}
.rp-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.rp-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rp-btn-secondary {
  margin-top: 16px;
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.rp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}
.rp-btn-link {
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
  transition: color 0.2s;
}
.rp-btn-link:hover {
  color: var(--color-text, #e2e8f0);
}
.rp-redirect-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 16px;
}
.rp-redirect-fill {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #00C6A7,
      #0099a8);
  border-radius: 4px;
  animation: rp-progress 3.5s linear forwards;
}
@keyframes rp-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.rp-spinner-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.rp-spinner-large {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: #00C6A7;
  border-radius: 50%;
  animation: rp-spin 0.7s linear infinite;
}
.rp-validating-text {
  font-size: 14px;
  color: var(--color-text-secondary, #94a3b8);
  text-align: center;
  margin: 0;
}
.rp-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rp-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes rp-spin {
  to {
    transform: rotate(360deg);
  }
}
.rp-card-error .rp-title {
  color: #FF4D6D;
}
.rp-card-success .rp-title {
  color: #4affc5;
}

/* src/pages/Tickets/TicketPage.css */
.tp-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #0f1117);
  padding: 24px 16px;
}
.tp-card {
  background: var(--color-surface, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 620px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  animation: tp-appear 0.3s ease;
}
@keyframes tp-appear {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.tp-logo {
  height: 28px;
  margin-bottom: 12px;
  opacity: 0.85;
}
.tp-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.tp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: -0.3px;
}
.tp-desc {
  font-size: 14px;
  color: var(--color-text-secondary, #94a3b8);
  text-align: center;
  margin: 0;
  line-height: 1.55;
}
.tp-desc-small {
  font-size: 13px;
  color: var(--color-text-secondary, #94a3b8);
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.6;
}
.tp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .tp-row {
    grid-template-columns: 1fr;
  }
  .tp-card {
    padding: 24px 20px;
  }
}
.tp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
}
.tp-required {
  color: #FF4D6D;
  margin-left: 2px;
}
.tp-optional {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.7;
}
.tp-input,
.tp-select,
.tp-textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-text, #e2e8f0);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.tp-input::placeholder,
.tp-textarea::placeholder {
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.5;
}
.tp-input:focus,
.tp-select:focus,
.tp-textarea:focus {
  border-color: rgba(0, 198, 167, 0.5);
  background: rgba(0, 198, 167, 0.04);
}
.tp-input[readonly] {
  opacity: 0.65;
  cursor: default;
}
.tp-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.tp-select option {
  background: #1a1f2e;
  color: #e2e8f0;
}
.tp-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.tp-char-count {
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  opacity: 0.5;
  text-align: right;
  margin-top: -2px;
}
.tp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #FF4D6D;
}
.tp-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.tp-btn-primary {
  padding: 11px 24px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #00C6A7,
      #0099a8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.tp-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.tp-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tp-btn-secondary {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--color-text-secondary, #94a3b8);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.tp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tp-card-success {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.tp-success-icon {
  font-size: 52px;
  margin-bottom: 12px;
}
.tp-ticket-number-box {
  background: rgba(0, 198, 167, 0.08);
  border: 1px solid rgba(0, 198, 167, 0.25);
  border-radius: 14px;
  padding: 16px 28px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tp-ticket-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tp-ticket-number {
  font-size: 22px;
  font-weight: 800;
  color: #00C6A7;
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
}
.tp-success-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.tp-success-actions--center {
  justify-content: center;
  margin-top: 16px;
}
.tp-success-actions--center .tp-btn-secondary {
  min-width: 140px;
}
.tp-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tp-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes tp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* src/pages/SmartLandingPage/SmartLandingPage.css */
.smart-lp-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(
      ellipse at 80% 90%,
      var(--color-accent-glow) 0%,
      transparent 60%),
    var(--color-bg);
  color: var(--color-text);
  padding: 40px 20px;
  box-sizing: border-box;
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
  animation: fadeIn 0.4s ease;
  transition: background var(--transition), color var(--transition);
}
.smart-lp-page--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.smart-lp-container {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}
@media (max-width: 640px) {
  .smart-lp-page {
    padding: 20px 10px;
  }
  .smart-lp-container {
    padding: 24px 16px;
    border-radius: 16px;
  }
}
.smart-lp-spinner-large {
  width: 44px;
  height: 44px;
  border: 4px solid var(--color-accent-glow);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.loading-text {
  font-size: 16px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.smart-lp-error-card,
.smart-lp-info-card {
  max-width: 460px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-md);
  transition: background var(--transition), border-color var(--transition);
}
.smart-lp-info-card--success {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.02);
}
.error-icon,
.info-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.animate-pulse-icon {
  animation: pulseIcon 1.5s infinite alternate;
}
@keyframes pulseIcon {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}
.smart-lp-info-card h2,
.smart-lp-error-card h2 {
  font-size: 22px;
  margin: 0 0 12px 0;
  font-weight: 700;
  color: var(--color-text);
}
.smart-lp-info-card p,
.smart-lp-error-card p {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}
.redirect-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.8;
}
.proposta-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-glow);
  padding: 6px 16px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 20px !important;
}
.proposta-status-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  transition: background var(--transition), border-color var(--transition);
}
.proposta-status-box span {
  color: var(--color-text-secondary);
  font-size: 14px;
}
.proposta-status-box strong {
  color: var(--color-accent);
  font-size: 15px;
}
.formalizacao-action-box {
  background: var(--color-accent-glow);
  border: 1px solid var(--color-border-accent);
  border-radius: 16px;
  padding: 20px;
  margin-top: 16px;
}
.action-help-text {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}
.formalizacao-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.logo-header {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 24px;
}
.welcome-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--color-text);
}
.welcome-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 28px 0;
  line-height: 1.5;
}
.smart-lp-value-card {
  background:
    linear-gradient(
      135deg,
      var(--color-surface-2) 0%,
      var(--color-surface-3) 100%);
  border: 1px solid var(--color-border-accent);
  box-shadow: var(--shadow-accent);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  margin-bottom: 28px;
  transition: border-color var(--transition);
}
.value-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.value-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 8px;
  text-shadow: var(--shadow-accent);
}
.value-footer {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.consent-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
  text-align: left;
}
.consent-checkbox-label {
  display: flex;
  gap: 12px;
  cursor: pointer;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.consent-checkbox-label input {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-accent);
}
.smart-lp-form-step h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--color-text);
}
.step-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
}
.smart-lp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}
@media (max-width: 600px) {
  .smart-lp-form-grid {
    grid-template-columns: 1fr;
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.smart-lp-input,
.smart-lp-select {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--color-text);
  font-size: 14px;
  transition: all 0.2s ease;
}
.smart-lp-input:focus,
.smart-lp-select:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  outline: none;
}
.smart-lp-input[readonly] {
  opacity: 0.6;
  background: var(--color-surface-3);
  cursor: not-allowed;
}
.form-cep-search {
  grid-column: span 2;
}
@media (max-width: 600px) {
  .form-cep-search {
    grid-column: span 1;
  }
}
.cep-input-box {
  display: flex;
  gap: 8px;
}
.cep-input-box input {
  flex: 1;
}
.btn-cep {
  padding: 0 16px;
}
.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  gap: 12px;
}
.smart-lp-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.smart-lp-btn--primary {
  background:
    linear-gradient(
      135deg,
      var(--color-accent) 0%,
      var(--color-accent-dark) 100%);
  color: #000;
}
.smart-lp-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}
.smart-lp-btn--secondary {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color var(--transition), color var(--transition);
}
.smart-lp-btn--secondary:hover:not(:disabled) {
  background: var(--color-surface-2);
}
.smart-lp-btn--full {
  width: 100%;
  box-sizing: border-box;
}
.smart-lp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.smart-lp-progress-bar {
  background: var(--color-surface-3);
  height: 4px;
  border-radius: 2px;
  margin-bottom: 28px;
  overflow: hidden;
}
.progress-fill {
  background: var(--color-accent);
  height: 100%;
  transition: width 0.3s ease;
}
.smart-lp-review-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-bottom: 24px;
}
.review-section {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
}
.review-section:last-child {
  border: none;
  padding-bottom: 0;
}
.review-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
}
.review-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.review-row span {
  color: var(--color-text-secondary);
}
.review-row strong {
  color: var(--color-text);
}
.smart-lp-link {
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}
.smart-lp-link:hover {
  color: var(--color-accent-dark);
}

/* src/pages/NoAccess/NoAccess.css */
.na-page {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.na-page::before,
.na-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.na-page::before {
  width: 560px;
  height: 560px;
  background:
    radial-gradient(
      circle,
      rgba(74, 255, 197, 0.07) 0%,
      transparent 70%);
  top: -160px;
  right: -160px;
  animation: float 8s ease-in-out infinite;
}
.na-page::after {
  width: 400px;
  height: 400px;
  background:
    radial-gradient(
      circle,
      rgba(74, 255, 197, 0.04) 0%,
      transparent 70%);
  bottom: -120px;
  left: -120px;
  animation: float 10s ease-in-out infinite reverse;
}
.na-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  box-shadow: var(--shadow-lg);
}
.na-logo {
  height: 36px;
  width: auto;
  margin-bottom: 32px;
  opacity: 0.9;
}
.na-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 179, 71, 0.1);
  border: 1px solid rgba(255, 179, 71, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  animation: mintPulse 3s ease-in-out infinite;
}
.na-icon-wrap svg {
  color: var(--color-warning);
}
.na-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 179, 71, 0.1);
  border: 1px solid rgba(255, 179, 71, 0.25);
  color: var(--color-warning);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.na-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warning);
  animation: pulse 2s ease-in-out infinite;
}
.na-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 14px;
  line-height: 1.3;
}
.na-desc {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}
.na-desc strong {
  color: var(--color-text-muted);
}
.na-info-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  margin-bottom: 32px;
}
.na-info-box svg {
  color: var(--color-info);
  flex-shrink: 0;
  margin-top: 1px;
}
.na-info-box p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.na-info-box p strong {
  color: var(--color-text-muted);
}
.na-divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: 28px;
}
.na-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 28px;
}
.na-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.2),
      rgba(74, 255, 197, 0.05));
  border: 1px solid var(--color-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}
.na-user-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.na-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.na-user-login {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.na-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.na-btn-primary {
  width: 100%;
  padding: 14px 24px;
  background: var(--color-accent);
  color: #000;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.na-btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(74, 255, 197, 0.25);
}
.na-btn-primary:active {
  transform: translateY(0);
}
.na-btn-secondary {
  width: 100%;
  padding: 13px 24px;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.na-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}
.na-btn-secondary:active {
  transform: translateY(0);
}
@media (max-width: 560px) {
  .na-card {
    padding: 36px 24px;
  }
  .na-title {
    font-size: 22px;
  }
}

/* src/pages/Digitacao/Digitacao.css */
.dig-page {
  padding: 2rem 2.5rem;
  max-width: 980px;
  margin: 0 auto;
}
.dig-header {
  margin-bottom: 2.5rem;
}
.dig-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text, #f0f2f5);
  margin: 0 0 0.4rem;
}
.dig-subtitle {
  font-size: 0.95rem;
  color: var(--color-text, #e2e8f0);
  margin: 0;
}
.dig-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.dig-product-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  overflow: hidden;
}
.dig-product-card:hover {
  border-color: var(--color-from, #4AFFC5);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-from, #4AFFC5);
}
.dig-product-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 10% 50%,
      color-mix(in srgb, var(--color-from, #4AFFC5) 12%, transparent),
      transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.dig-product-card:hover .dig-product-glow {
  opacity: 1;
}
.dig-product-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      var(--color-from, #4AFFC5),
      var(--color-to, #00B89F));
  color: #000;
  flex-shrink: 0;
}
.dig-product-info {
  flex: 1;
}
.dig-product-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #f0f2f5);
  margin: 0 0 0.3rem;
}
.dig-product-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #8892a4);
  margin: 0;
}
.dig-product-arrow {
  color: var(--text-secondary, #8892a4);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.dig-product-card:hover .dig-product-arrow {
  color: var(--color-from, #4AFFC5);
  transform: translateX(4px);
}
.dig-product-card--loading {
  height: 120px;
  background:
    linear-gradient(
      90deg,
      var(--bg-card,#1a1f2e) 25%,
      rgba(255, 255, 255, 0.04) 50%,
      var(--bg-card,#1a1f2e) 75%);
  background-size: 200% 100%;
  animation: dig-shimmer 1.5s infinite;
}
@keyframes dig-shimmer {
  0% {
    background-position: 200%;
  }
  100% {
    background-position: -200%;
  }
}
.dig-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}
.dig-empty-icon {
  font-size: 2.5rem;
}
.dig-empty p {
  color: var(--text-primary, #f0f2f5);
  font-size: 1rem;
  margin: 0;
}
.dig-empty-sub {
  font-size: 0.85rem;
  color: var(--text-secondary, #8892a4);
}
.dig-wizard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.dig-back-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-secondary, #8892a4);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.dig-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #f0f2f5);
}
.dig-wizard-product {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-from,#4AFFC5) 15%, transparent),
      transparent);
  border: 1px solid color-mix(in srgb, var(--color-from,#4AFFC5) 30%, transparent);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-from, #4AFFC5);
}
.dig-wizard-product svg {
  opacity: 0.9;
}
.dig-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  gap: 0;
}
.dig-step {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.dig-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-secondary, #252a38);
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #8892a4);
  flex-shrink: 0;
  transition: all 0.3s;
}
.dig-step--active .dig-step-dot {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
  border-color: #4AFFC5;
  color: #000;
  box-shadow: 0 0 12px rgba(74, 255, 197, 0.4);
}
.dig-step--done .dig-step-dot {
  background: rgba(74, 255, 197, 0.15);
  border-color: #4AFFC5;
  color: #4AFFC5;
}
.dig-step-label {
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--text-secondary, #8892a4);
  margin-left: 0.4rem;
  white-space: nowrap;
}
.dig-step--active .dig-step-label {
  color: #4AFFC5;
}
.dig-step--done .dig-step-label {
  color: var(--text-primary, #f0f2f5);
}
.dig-step-line {
  width: 2.5rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0.5rem;
  flex-shrink: 0;
}
.dig-step--done .dig-step-line {
  background: rgba(74, 255, 197, 0.3);
}
.dig-wizard-body {
  background: var(--bg-card, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 2rem;
  min-height: 400px;
}
.dig-step-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #f0f2f5);
  margin: 0 0 0.4rem;
}
.dig-step-desc {
  font-size: 0.875rem;
  color: var(--text-secondary, #8892a4);
  margin: 0 0 1.75rem;
  line-height: 1.6;
}
.dig-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dig-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dig-form-group.full {
  grid-column: 1 / -1;
}
.dig-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #8892a4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dig-input {
  padding: 0.65rem 0.9rem;
  background: var(--bg-secondary, #252a38);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-primary, #f0f2f5);
  font-size: 0.9rem;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.dig-input:focus {
  outline: none;
  border-color: #4AFFC5;
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.12);
}
.dig-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.dig-input.error {
  border-color: #FF4D6D;
}
.dig-select {
  padding: 0.65rem 0.9rem;
  background: var(--bg-secondary, #252a38);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-primary, #f0f2f5);
  font-size: 0.9rem;
  width: 100%;
  cursor: pointer;
}
.dig-select:focus {
  outline: none;
  border-color: #4AFFC5;
}
.dig-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}
.dig-row .dig-form-group {
  flex: 1;
}
.dig-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.dig-btn {
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dig-btn--primary {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
  color: #000;
}
.dig-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.dig-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dig-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #8892a4);
}
.dig-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #f0f2f5);
}
.dig-btn--danger {
  background: rgba(255, 77, 109, 0.15);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #FF4D6D;
}
.dig-btn--success {
  background:
    linear-gradient(
      135deg,
      #22c55e,
      #16a34a);
  color: #fff;
}
.dig-btn--success:hover:not(:disabled) {
  filter: brightness(1.1);
}
.dig-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: dig-spin 0.7s linear infinite;
}
@keyframes dig-spin {
  to {
    transform: rotate(360deg);
  }
}
.dig-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
.dig-alert--error {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  color: #FF4D6D;
}
.dig-alert--warning {
  background: rgba(255, 179, 71, 0.1);
  border: 1px solid rgba(255, 179, 71, 0.25);
  color: #FFB347;
}
.dig-alert--success {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
}
.dig-alert--info {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #60A5FA;
}
.dig-tabelas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dig-tabela-card {
  padding: 1.25rem 1.5rem;
  background: var(--bg-secondary, #252a38);
  border: 2px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.dig-tabela-card:hover {
  border-color: rgba(74, 255, 197, 0.4);
}
.dig-tabela-card--selected {
  border-color: #4AFFC5;
  background: rgba(74, 255, 197, 0.07);
}
.dig-tabela-nome {
  font-weight: 700;
  color: var(--text-primary,#f0f2f5);
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.dig-tabela-info {
  font-size: 0.8rem;
  color: var(--text-secondary,#8892a4);
}
.dig-tabela-codigo {
  font-size: 0.75rem;
  color: var(--text-secondary,#8892a4);
  margin-top: 0.3rem;
  font-family: monospace;
}
[data-theme=light] ::selection {
  background: rgba(26, 107, 232, 0.18);
  color: #0a2150;
}
[data-theme=light] ::-moz-selection {
  background: rgba(26, 107, 232, 0.18);
  color: #0a2150;
}
.dig-simulacao-result {
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.07),
      rgba(0, 184, 159, 0.04));
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.dig-simulacao-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4AFFC5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.dig-simulacao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.dig-simulacao-item {
}
.dig-simulacao-label {
  font-size: 0.75rem;
  color: var(--text-secondary,#8892a4);
  margin-bottom: 0.25rem;
}
.dig-simulacao-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary,#f0f2f5);
}
.dig-simulacao-value--highlight {
  color: #4AFFC5;
  font-size: 1.3rem;
}
.dig-cliente-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem 1rem;
  background: rgba(10, 20, 35, 0.6);
  border: 1px solid rgba(74, 255, 197, 0.22);
  border-radius: 14px;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  animation: dig-fadein 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dig-cliente-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      #4AFFC5,
      #00B89F);
  border-radius: 0 0 14px 14px;
}
.dig-cliente-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0a0f1a;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(74, 255, 197, 0.3);
}
.dig-cliente-name {
  font-weight: 800;
  color: var(--text-primary, #f0f2f5);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.dig-cliente-meta {
  font-size: 0.78rem;
  color: #4AFFC5;
  opacity: 0.85;
}
.dig-resumo-section {
  margin-bottom: 1.5rem;
}
.dig-resumo-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4AFFC5;
  margin-bottom: 0.75rem;
}
.dig-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}
.dig-resumo-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dig-resumo-label {
  font-size: 0.75rem;
  color: var(--text-secondary,#8892a4);
}
.dig-resumo-value {
  font-size: 0.88rem;
  color: var(--text-primary,#f0f2f5);
  font-weight: 500;
}
.dig-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem 1rem;
}
.dig-success-icon {
  font-size: 3.5rem;
}
.dig-success-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #4AFFC5;
  margin: 0;
}
.dig-success-desc {
  font-size: 0.9rem;
  color: var(--text-secondary,#8892a4);
  margin: 0;
}
.dig-success-number {
  padding: 0.75rem 1.5rem;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.3);
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #4AFFC5;
  letter-spacing: 0.05em;
}
.dig-cep-group {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.dig-cep-group .dig-form-group {
  flex: 1;
}
.dig-cep-btn {
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-secondary,#8892a4);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
}
.dig-cep-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.dig-input-wrap {
  position: relative;
}
.dig-input-wrap .dig-input {
  padding-right: 2.5rem;
}
.dig-eye-btn {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary,#8892a4);
  padding: 0;
  display: flex;
}
@media (max-width: 600px) {
  .dig-page {
    padding: 1rem 1.25rem;
  }
  .dig-steps {
    gap: 0;
  }
  .dig-step-line {
    width: 1rem;
  }
  .dig-step-label {
    display: none;
  }
  .dig-wizard-body {
    padding: 1.25rem;
  }
}
.dig-product-cache-count {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
  opacity: 0.85;
}
.dig-history-panel {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 0.9rem 1.25rem 1rem;
  margin-top: 1.25rem;
  animation: dig-fadein 0.3s ease;
}
@keyframes dig-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dig-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.dig-history-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #8892a4);
}
.dig-history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary, #8892a4);
  letter-spacing: 0;
  text-transform: none;
}
.dig-history-expires {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.25);
}
.dig-search-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}
.dig-search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.dig-search-icon {
  position: absolute;
  left: 0.7rem;
  color: var(--text-secondary, #8892a4);
  pointer-events: none;
  flex-shrink: 0;
}
.dig-search-input {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary, #f0f2f5);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.dig-search-input:focus {
  border-color: rgba(74, 255, 197, 0.35);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.08);
}
.dig-search-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.dig-search-clear {
  position: absolute;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.dig-search-clear:hover {
  background: rgba(255, 77, 109, 0.15);
  color: #FF4D6D;
}
.dig-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1a1f2e;
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 100;
  overflow: hidden;
  animation: dig-fadein 0.15s ease;
}
.dig-suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 0.15s;
}
.dig-suggestion-item:last-child {
  border-bottom: none;
}
.dig-suggestion-item:hover {
  background: rgba(74, 255, 197, 0.06);
}
.dig-suggestion-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: #0a0f1a;
  flex-shrink: 0;
}
.dig-suggestion-info {
  flex: 1;
  min-width: 0;
}
.dig-suggestion-nome {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary, #f0f2f5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dig-suggestion-cpf {
  font-size: 0.7rem;
  color: var(--text-secondary, #8892a4);
  font-family: monospace;
}
.dig-suggestion-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.dig-suggestion-arrow {
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.dig-tag-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0.75rem;
}
.dig-tag-dropdown-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s;
}
.dig-tag-dropdown {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 32px 5px 11px;
  color: var(--text-secondary, #8892a4);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: all 0.18s;
  min-width: 160px;
}
.dig-tag-dropdown:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary, #f0f2f5);
}
.dig-tag-dropdown:focus {
  border-color: rgba(255, 255, 255, 0.25);
}
.dig-tag-dropdown--active {
  border-color: color-mix(in srgb, var(--active-tag-color, #4AFFC5) 50%, transparent);
  color: var(--active-tag-color, #4AFFC5);
  background: color-mix(in srgb, var(--active-tag-color, #4AFFC5) 8%, transparent);
}
.dig-tag-dropdown option {
  background: #0e1a28;
  color: #e0e8f0;
  font-weight: 500;
}
.dig-tag-dropdown-arrow {
  position: absolute;
  right: 9px;
  pointer-events: none;
  color: var(--active-tag-color, rgba(255,255,255,0.35));
  transition: color 0.18s;
}
.dig-history-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.dig-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dig-history-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  color: inherit;
  position: relative;
}
.dig-history-item:hover {
  background: rgba(var(--color-from, 74, 255, 197), 0.07);
  border-color: color-mix(in srgb, var(--color-from, #4AFFC5) 35%, transparent);
  transform: translateX(3px);
}
.dig-history-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--color-from, #4AFFC5),
      rgba(0, 184, 159, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #0a0f1a;
  flex-shrink: 0;
}
.dig-history-info {
  flex: 1;
  min-width: 0;
}
.dig-history-nome {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #f0f2f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dig-history-cpf {
  font-size: 0.75rem;
  color: var(--text-secondary, #8892a4);
  font-family: monospace;
  letter-spacing: 0.04em;
}
.dig-history-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.dig-history-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
}
.dig-history-remove:hover {
  background: rgba(255, 77, 109, 0.15);
  color: #FF4D6D;
}
.dig-history-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255, 175, 50, 0.25);
  color: #FFAF32;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
  opacity: 0.7;
}
.dig-history-retry:hover {
  background: rgba(255, 175, 50, 0.15);
  border-color: rgba(255, 175, 50, 0.5);
  opacity: 1;
  transform: rotate(-30deg);
}
[data-theme=light] .dig-history-retry {
  border-color: rgba(180, 83, 9, 0.3);
  color: #B45309;
}
[data-theme=light] .dig-history-retry:hover {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.5);
}
.dig-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.dig-page-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-secondary, #8892a4);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.dig-page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-primary, #f0f2f5);
}
.dig-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dig-page-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
}
.dig-page-current {
  font-weight: 700;
  color: #4AFFC5;
}
.dig-page-sep,
.dig-page-total {
  color: var(--text-secondary, #8892a4);
}
[data-theme=light] .dig-title {
  background:
    linear-gradient(
      135deg,
      #0F1923,
      var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme=light] .dig-product-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .dig-product-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 30px rgba(26, 107, 232, 0.12), 0 0 0 1px var(--color-accent);
}
[data-theme=light] .dig-product-card--loading {
  background:
    linear-gradient(
      90deg,
      #f1f5f9 25%,
      #e2e8f0 50%,
      #f1f5f9 75%);
}
[data-theme=light] .dig-back-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .dig-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .dig-wizard-body {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .dig-step-dot {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text-secondary);
}
[data-theme=light] .dig-step--active .dig-step-dot {
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      #1250B0);
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 12px rgba(26, 107, 232, 0.35);
}
[data-theme=light] .dig-step--done .dig-step-dot {
  background: rgba(26, 107, 232, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[data-theme=light] .dig-step--active .dig-step-label {
  color: var(--color-accent);
}
[data-theme=light] .dig-step-line {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .dig-step--done .dig-step-line {
  background: rgba(26, 107, 232, 0.25);
}
[data-theme=light] .dig-input {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}
[data-theme=light] .dig-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.1);
}
[data-theme=light] .dig-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
[data-theme=light] .dig-select {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-text);
}
[data-theme=light] .dig-select:focus {
  border-color: var(--color-accent);
}
[data-theme=light] .dig-btn--primary {
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      #1250B0);
  color: #ffffff;
}
[data-theme=light] .dig-btn--ghost {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text-secondary);
}
[data-theme=light] .dig-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text);
}
[data-theme=light] .dig-cep-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .dig-cep-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .dig-alert--success {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
  color: var(--color-accent);
}
[data-theme=light] .dig-tabela-card {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme=light] .dig-tabela-card:hover {
  border-color: rgba(26, 107, 232, 0.35);
}
[data-theme=light] .dig-tabela-card--selected {
  border-color: var(--color-accent);
  background: rgba(26, 107, 232, 0.05);
}
[data-theme=light] .dig-simulacao-result {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.05),
      rgba(18, 80, 176, 0.03));
  border-color: rgba(26, 107, 232, 0.18);
}
[data-theme=light] .dig-simulacao-title {
  color: var(--color-accent);
}
[data-theme=light] .dig-simulacao-value--highlight {
  color: var(--color-accent);
}
[data-theme=light] .dig-cliente-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(26, 107, 232, 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
[data-theme=light] .dig-cliente-card::after {
  background:
    linear-gradient(
      90deg,
      #1A6BE8,
      #1250B0);
}
[data-theme=light] .dig-cliente-avatar {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(26, 107, 232, 0.3);
}
[data-theme=light] .dig-cliente-meta {
  color: #1A6BE8;
}
[data-theme=light] .dig-resumo-section-title {
  color: var(--color-accent);
}
[data-theme=light] .dig-success-title {
  color: var(--color-accent);
}
[data-theme=light] .dig-success-number {
  background: rgba(26, 107, 232, 0.07);
  border-color: rgba(26, 107, 232, 0.2);
  color: var(--color-accent);
}
[data-theme=light] .dig-wizard-product {
  background:
    linear-gradient(
      135deg,
      rgba(26, 107, 232, 0.08),
      transparent);
  border-color: rgba(26, 107, 232, 0.25);
  color: var(--color-accent);
}
[data-theme=light] .dig-history-panel {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .dig-history-count {
  background: rgba(0, 0, 0, 0.07);
  color: var(--color-text-secondary);
}
[data-theme=light] .dig-history-expires {
  color: rgba(0, 0, 0, 0.3);
}
[data-theme=light] .dig-history-empty {
  color: rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .dig-history-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .dig-history-item:hover {
  background: rgba(26, 107, 232, 0.05);
  border-color: rgba(26, 107, 232, 0.25);
}
[data-theme=light] .dig-history-avatar {
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      #1250B0);
  color: #ffffff;
}
[data-theme=light] .dig-history-remove {
  color: rgba(0, 0, 0, 0.25);
}
[data-theme=light] .dig-history-remove:hover {
  background: rgba(255, 77, 109, 0.1);
  color: #e02a4d;
}
[data-theme=light] .dig-search-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text);
}
[data-theme=light] .dig-search-input:focus {
  border-color: rgba(26, 107, 232, 0.35);
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.08);
}
[data-theme=light] .dig-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
[data-theme=light] .dig-search-clear {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.35);
}
[data-theme=light] .dig-search-clear:hover {
  background: rgba(255, 77, 109, 0.1);
  color: #e02a4d;
}
[data-theme=light] .dig-tag-dropdown {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text-secondary);
}
[data-theme=light] .dig-tag-dropdown:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-text);
}
[data-theme=light] .dig-tag-dropdown option {
  background: #ffffff;
  color: #0F1923;
}
[data-theme=light] .dig-suggestions {
  background: #ffffff;
  border-color: rgba(26, 107, 232, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
[data-theme=light] .dig-suggestion-item {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme=light] .dig-suggestion-item:hover {
  background: rgba(26, 107, 232, 0.05);
}
[data-theme=light] .dig-suggestion-arrow {
  color: rgba(0, 0, 0, 0.2);
}
[data-theme=light] .dig-pagination {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .dig-page-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
  color: var(--color-text-secondary);
}
[data-theme=light] .dig-page-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--color-text);
}
[data-theme=light] .dig-page-current {
  color: var(--color-accent);
}
[data-theme=light] .dig-page-label {
  color: rgba(0, 0, 0, 0.3);
}
[data-theme=light] .dig-empty {
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme=light] .dig-product-icon {
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      #1250B0) !important;
  color: #ffffff !important;
}
[data-theme=light] .dig-history-nome,
[data-theme=light] .dig-product-name,
[data-theme=light] .dig-step-title,
[data-theme=light] .dig-tabela-nome,
[data-theme=light] .dig-simulacao-value,
[data-theme=light] .dig-resumo-value,
[data-theme=light] .dig-cliente-name,
[data-theme=light] .dig-suggestion-nome,
[data-theme=light] .dig-input,
[data-theme=light] .dig-select {
  color: var(--color-text) !important;
}
[data-theme=light] .dig-history-cpf,
[data-theme=light] .dig-history-title,
[data-theme=light] .dig-history-expires,
[data-theme=light] .dig-product-meta,
[data-theme=light] .dig-product-arrow,
[data-theme=light] .dig-step-desc,
[data-theme=light] .dig-label,
[data-theme=light] .dig-tabela-info,
[data-theme=light] .dig-tabela-codigo,
[data-theme=light] .dig-simulacao-label,
[data-theme=light] .dig-resumo-label,
[data-theme=light] .dig-cliente-meta,
[data-theme=light] .dig-suggestion-cpf,
[data-theme=light] .dig-subtitle,
[data-theme=light] .dig-back-btn,
[data-theme=light] .dig-success-desc,
[data-theme=light] .dig-page-sep,
[data-theme=light] .dig-page-total {
  color: var(--color-text-secondary) !important;
}

/* src/pages/Esteira/Esteira.css */
.est-page {
  padding: 1.5rem 2rem;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 100vh;
}
.est-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.est-header-left {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.est-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.02em;
}
.est-count {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.est-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.est-refresh-btn:hover {
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.06);
}
.est-mock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 179, 50, 0.25);
  background: rgba(255, 179, 50, 0.06);
  color: rgba(255, 179, 50, 0.85);
  font-size: 12.5px;
  margin-bottom: 1rem;
}
.est-mock-banner strong {
  color: #FFB347;
}
.est-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.est-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
.est-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}
.est-search-input {
  width: 100%;
  padding: 8px 34px 8px 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.est-search-input:focus {
  border-color: rgba(74, 255, 197, 0.35);
}
.est-search-clear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.est-date-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.est-date-input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 12px;
  outline: none;
}
.est-date-sep {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.est-filter-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
  color: #0a0f1a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.est-filter-btn:hover {
  opacity: 0.88;
}
@media (max-width: 767px) {
  .est-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .est-search-wrap {
    min-width: unset;
    max-width: unset;
    width: 100%;
    flex: unset;
  }
  .est-date-wrap {
    width: 100%;
  }
  .est-date-input {
    flex: 1;
    min-width: 0;
    width: 0;
    box-sizing: border-box;
  }
  .est-filter-btn {
    width: 100%;
    padding: 9px 16px;
  }
}
.est-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
  margin-bottom: 1rem;
}
.est-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.est-thead-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.est-th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
}
.est-th--num {
  text-align: right;
}
.est-th--center {
  text-align: center;
}
.est-th--actions {
  width: 90px;
}
.est-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.1s;
}
.est-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.est-row:last-child {
  border-bottom: none;
}
.est-cell {
  padding: 9px 12px;
  color: var(--color-text);
  white-space: nowrap;
  vertical-align: middle;
}
.est-cell--mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
}
.est-cell--muted {
  color: var(--color-text-secondary);
}
.est-cell--name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.est-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.est-cell--center {
  text-align: center;
}
.est-cell--green {
  color: #4AFFC5;
  font-weight: 700;
}
.est-cell--date {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.est-cell--sit {
}
.est-muted {
  color: var(--color-text-secondary);
}
.est-sit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  cursor: default;
}
.sit--and {
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.25);
}
.sit--pen {
  background: rgba(255, 175, 50, 0.12);
  color: #FFAF32;
  border: 1px solid rgba(255, 175, 50, 0.25);
}
.sit--int {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.sit--rep {
  background: rgba(255, 77, 109, 0.12);
  color: #FF4D6D;
  border: 1px solid rgba(255, 77, 109, 0.25);
}
.sit--apr {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25);
}
.sit--can {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.sit--default {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.est-atividade {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 180px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.est-row--skeleton .est-cell {
  padding: 11px 12px;
}
.est-skeleton {
  height: 10px;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: est-shimmer 1.4s infinite;
}
@keyframes est-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.est-empty,
.est-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 3.5rem 1rem;
  color: var(--color-text-secondary);
  font-size: 13px;
  text-align: center;
}
.est-error {
  color: #FF4D6D;
}
.est-cell--actions {
  width: 90px;
}
.est-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 3px;
}
.est-action-btn:hover {
  border-color: rgba(74, 255, 197, 0.35);
  color: #4AFFC5;
  background: rgba(74, 255, 197, 0.07);
}
.est-action-btn--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.est-action-btn--copied {
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.08) !important;
}
.est-action-btn--refreshing {
  border-color: rgba(74, 255, 197, 0.4) !important;
  color: #4AFFC5 !important;
  background: rgba(74, 255, 197, 0.08) !important;
  cursor: wait !important;
}
@keyframes est-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.est-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0.5rem 0 1rem;
}
.est-page-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.est-page-btn:hover:not(:disabled) {
  border-color: rgba(74, 255, 197, 0.3);
  color: #4AFFC5;
}
.est-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.est-page-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.est-page-cur {
  font-weight: 700;
  color: var(--color-text);
}
.est-page-sep {
  opacity: 0.4;
}
.est-page-lbl {
  margin-left: 4px;
  opacity: 0.55;
}
.est-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: est-fade-in 0.15s ease;
}
@keyframes est-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.est-modal {
  background: var(--color-surface, #151c2c);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: est-slide-up 0.2s ease;
}
@keyframes est-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.est-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: sticky;
  top: 0;
  background: var(--color-surface, #151c2c);
  z-index: 1;
}
.est-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.est-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.est-modal-close:hover {
  border-color: rgba(255, 77, 109, 0.4);
  color: #FF4D6D;
  background: rgba(255, 77, 109, 0.07);
}
.est-modal-body {
  padding: 1.2rem 1.4rem;
}
.est-detail-section {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.est-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.est-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}
.est-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.est-detail-row:last-child {
  border-bottom: none;
}
.est-detail-label {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  min-width: 120px;
  flex-shrink: 0;
}
.est-detail-value {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
[data-theme=light] .est-refresh-btn {
  border-color: #d1d9e6;
  background: #f1f5f9;
  color: #475569;
}
[data-theme=light] .est-refresh-btn:hover {
  border-color: rgba(26, 107, 232, 0.3);
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.05);
}
[data-theme=light] .est-mock-banner {
  border-color: rgba(202, 138, 4, 0.3);
  background: rgba(254, 243, 199, 0.8);
  color: #92400e;
}
[data-theme=light] .est-mock-banner strong {
  color: #b45309;
}
[data-theme=light] .est-search-input,
[data-theme=light] .est-date-input {
  background: #fff;
  border-color: #d1d9e6;
  color: #1e293b;
}
[data-theme=light] .est-search-input::placeholder {
  color: #94a3b8;
}
[data-theme=light] .est-search-input:focus,
[data-theme=light] .est-date-input:focus {
  border-color: #1A6BE8;
}
[data-theme=light] .est-search-clear {
  color: #64748b;
}
[data-theme=light] .est-date-sep {
  color: #64748b;
}
[data-theme=light] .est-table-wrap {
  background: #fff;
  border-color: #e2e8f0;
}
@media (max-width: 767px) {
  [data-theme=light] .est-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
  }
}
[data-theme=light] .est-thead-row {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .est-th {
  background: #f8fafc;
  color: #64748b;
}
[data-theme=light] .est-row {
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .est-row:hover {
  background: #f1f5f9;
}
[data-theme=light] .est-cell {
  color: #1e293b;
}
[data-theme=light] .est-cell--muted {
  color: #64748b;
}
[data-theme=light] .est-cell--date {
  color: #64748b;
}
[data-theme=light] .est-cell--green {
  color: #1A6BE8;
}
[data-theme=light] .est-muted {
  color: #64748b;
}
[data-theme=light] .est-atividade {
  color: #64748b;
}
[data-theme=light] .sit--and {
  background: rgba(26, 107, 232, 0.08);
  color: #1A6BE8;
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .sit--pen {
  background: rgba(202, 138, 4, 0.10);
  color: #b45309;
  border-color: rgba(202, 138, 4, 0.25);
}
[data-theme=light] .sit--int {
  background: rgba(22, 163, 74, 0.10);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.25);
}
[data-theme=light] .sit--rep {
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}
[data-theme=light] .sit--apr {
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}
[data-theme=light] .sit--can {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.2);
}
[data-theme=light] .sit--default {
  background: #f1f5f9;
  color: #64748b;
  border-color: #d1d9e6;
}
[data-theme=light] .est-skeleton {
  background:
    linear-gradient(
      90deg,
      #e2e8f0 25%,
      #f1f5f9 50%,
      #e2e8f0 75%);
  background-size: 200% 100%;
}
[data-theme=light] .est-action-btn {
  border-color: #d1d9e6;
  background: #f8fafc;
  color: #64748b;
}
[data-theme=light] .est-action-btn:hover {
  border-color: rgba(26, 107, 232, 0.35);
  color: #1A6BE8;
  background: rgba(26, 107, 232, 0.07);
}
[data-theme=light] .est-page-btn {
  border-color: #d1d9e6;
  background: #f8fafc;
  color: #475569;
}
[data-theme=light] .est-page-btn:hover:not(:disabled) {
  border-color: rgba(26, 107, 232, 0.3);
  color: #1A6BE8;
}
[data-theme=light] .est-page-info {
  color: #64748b;
}
[data-theme=light] .est-page-cur {
  color: #1e293b;
}
[data-theme=light] .est-filter-btn {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
  color: #fff;
}
[data-theme=light] .est-modal {
  background: #fff;
  border-color: #e2e8f0;
}
[data-theme=light] .est-modal-header {
  background: #fff;
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .est-modal-close {
  border-color: #d1d9e6;
  color: #64748b;
}
[data-theme=light] .est-modal-close:hover {
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
  background: rgba(220, 38, 38, 0.07);
}
[data-theme=light] .est-detail-section {
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .est-detail-row {
  border-bottom-color: #f8fafc;
}
[data-theme=light] .est-detail-label {
  color: #64748b;
}
[data-theme=light] .est-detail-value {
  color: #1e293b;
}
[data-theme=light] .est-section-title {
  color: #64748b;
}
[data-theme=light] .est-empty {
  color: #64748b;
}
.est-mob-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.est-mob-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.est-mob-card--open {
  border-color: rgba(74, 255, 197, 0.3);
}
.est-mob-card--skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.est-mob-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.est-mob-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.est-mob-cpf {
  font-size: 11px;
  color: var(--text-secondary, #8892a4);
  font-family: monospace;
  letter-spacing: 0.04em;
}
.est-mob-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #f0f2f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.est-mob-link-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.est-mob-chevron {
  flex-shrink: 0;
  color: var(--text-secondary, #8892a4);
  transition: transform 0.2s ease;
}
.est-mob-chevron--open {
  transform: rotate(180deg);
}
.est-mob-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: dig-fadein 0.18s ease;
}
.est-mob-detail-section {
}
.est-mob-detail-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4AFFC5;
  margin: 0 0 8px;
}
.est-mob-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  align-items: start;
}
.est-mob-dl {
  font-size: 11px;
  color: var(--text-secondary, #8892a4);
  white-space: nowrap;
}
.est-mob-dv {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  word-break: break-word;
}
.est-mob-dv--green {
  color: #4AFFC5;
}
[data-theme=light] .est-mob-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
[data-theme=light] .est-mob-card--open {
  border-color: rgba(26, 107, 232, 0.35);
}
[data-theme=light] .est-mob-detail {
  border-top-color: rgba(0, 0, 0, 0.07);
}
[data-theme=light] .est-mob-detail-title {
  color: #1A6BE8;
}
[data-theme=light] .est-mob-cpf {
  color: #64748b;
}
[data-theme=light] .est-mob-name {
  color: #1e293b;
}
[data-theme=light] .est-mob-dl {
  color: #64748b;
}
[data-theme=light] .est-mob-dv {
  color: #1e293b;
}
[data-theme=light] .est-mob-dv--green {
  color: #1A6BE8;
}
[data-theme=light] .est-mob-chevron {
  color: #94a3b8;
}

/* src/pages/AutoContratacao/PartnerLPEditor.css */
.ple-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-main, #12121a);
  overflow: hidden;
}
.ple-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-card, #1e1e2e);
  border-bottom: 1px solid var(--border, #2a2a3e);
  flex-shrink: 0;
  z-index: 10;
}
.ple-back-btn {
  background: none;
  border: 1px solid var(--border, #2a2a3e);
  color: var(--text-muted, #888);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
  white-space: nowrap;
}
.ple-back-btn:hover {
  color: var(--text-primary, #fff);
  border-color: #555;
}
.ple-toolbar-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ple-toolbar-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.ple-slug-badge {
  font-size: 0.72rem;
  color: var(--primary, #00e676);
  font-family: "Courier New", monospace;
  background: #00e67610;
  padding: 2px 8px;
  border-radius: 4px;
}
.ple-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.ple-publish-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--primary, #00e676);
  background: none;
  color: var(--primary, #00e676);
  transition: all 0.15s;
}
.ple-publish-btn:hover {
  background: #00e67615;
}
.ple-publish-btn--active {
  background: #ffb74d20;
  border-color: #ffb74d;
  color: #ffb74d;
}
.ple-publish-btn--active:hover {
  background: #ffb74d30;
}
.ple-save-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: var(--primary, #00e676);
  color: #000;
  transition: opacity 0.15s;
}
.ple-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ple-save-btn:hover:not(:disabled) {
  opacity: 0.85;
}
.ple-layout {
  display: grid;
  grid-template-columns: 460px 1fr;
  flex: 1;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .ple-layout {
    grid-template-columns: 410px 1fr;
  }
}
@media (max-width: 860px) {
  .ple-layout {
    grid-template-columns: 1fr;
  }
}
.ple-form-panel {
  background: var(--bg-card, #1e1e2e);
  border-right: 1px solid var(--border, #2a2a3e);
  padding: 24px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.ple-form-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 6px;
}
.ple-form-section-sub {
  font-size: 0.82rem;
  color: var(--text-muted, #888);
  margin: 0 0 20px;
  line-height: 1.5;
}
.ple-section-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}
.ple-divider {
  border: none;
  border-top: 1px solid var(--border, #2a2a3e);
  margin: 20px 0;
}
.ple-field-group {
  margin-bottom: 14px;
}
.ple-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ple-input,
.ple-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-main, #12121a);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-primary, #fff);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.15s;
  resize: vertical;
}
.ple-input:focus,
.ple-textarea:focus {
  outline: none;
  border-color: var(--primary, #00e676);
}
.ple-hint {
  font-size: 0.73rem;
  color: var(--text-muted, #666);
  margin-top: 4px;
  display: block;
}
.ple-save-bottom {
  margin-top: 24px;
}
.ple-save-btn-lg {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--primary, #00e676);
  color: #000;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ple-save-btn-lg:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ple-save-btn-lg:hover:not(:disabled) {
  opacity: 0.85;
}
.ple-preview-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a14;
}
.ple-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-card, #1e1e2e);
  border-bottom: 1px solid var(--border, #2a2a3e);
  font-size: 0.82rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
  gap: 12px;
}
.ple-preview-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ple-preview-hint {
  font-size: 0.75rem;
  color: #64748b;
}
.ple-device-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 4px;
}
.ple-device-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ple-device-btn:hover:not(.active) {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
}
.ple-device-btn.active {
  background: var(--primary, #00e676);
  color: #0b1320;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.25);
}
.ple-preview-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
  background:
    radial-gradient(
      circle at 50% 20%,
      #151a26 0%,
      #0a0d14 100%);
  position: relative;
}
.ple-preview-body::-webkit-scrollbar {
  width: 6px;
}
.ple-preview-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.ple-preview-mobile-full {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
}
.ple-preview-desktop {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
}
.ple-phone-container.lpb-phone-mockup {
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  height: 800px;
  max-height: calc(100vh - 120px);
  background: #0e141c;
  border-radius: 46px;
  border: 10px solid #1a222f;
  outline: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px #090d13,
    0 25px 60px -15px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(0, 230, 118, 0.12);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  margin: auto;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ple-phone-container.lpb-phone-mockup::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 110px;
  width: 3px;
  height: 48px;
  background: #334155;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 65px 0 #334155;
}
.ple-phone-container.lpb-phone-mockup::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 135px;
  width: 3px;
  height: 64px;
  background: #334155;
  border-radius: 0 2px 2px 0;
}
.ple-phone-container .lpb-phone-island-bar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background-color: rgba(14, 20, 28, 0.95);
  backdrop-filter: blur(12px);
  z-index: 50;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  user-select: none;
}
.ple-phone-container .lpb-phone-time {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
}
.ple-phone-container .lpb-phone-island {
  width: 86px;
  height: 18px;
  background-color: #000000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.ple-phone-container .lpb-phone-camera {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0b1320;
  border: 1px solid #1a2233;
}
.ple-phone-container .lpb-phone-island-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cbd5e1;
}
.ple-phone-container .lpb-phone-screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.ple-phone-container .lpb-phone-screen::-webkit-scrollbar {
  width: 4px;
}
.ple-phone-container .lpb-phone-screen::-webkit-scrollbar-track {
  background: transparent;
}
.ple-phone-container .lpb-phone-screen::-webkit-scrollbar-thumb {
  background: rgba(0, 230, 118, 0.25);
  border-radius: 2px;
}
.ple-phone-container .lpb-phone-screen::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 230, 118, 0.5);
}
.ple-phone-container .lpb-phone-screen .pplp-preview-wrapper .pplp-app-container {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
}
.ple-phone-container .lpb-phone-home-indicator {
  height: 18px;
  background-color: rgba(14, 20, 28, 0.95);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.ple-phone-container .lpb-phone-home-bar {
  width: 110px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 4px;
  opacity: 0.65;
}
.ple-blocks-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ple-accordion-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ple-accordion-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.ple-reset-blocks-btn {
  background: none;
  border: none;
  color: var(--primary, #00e676);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
  transition: color 0.15s;
}
.ple-reset-blocks-btn:hover {
  color: #ffffff;
}
.ple-blocks-manager {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.ple-block-card {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}
.ple-block-card:hover {
  border-color: rgba(0, 230, 118, 0.38);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  background: rgba(15, 23, 42, 0.7);
}
.ple-block-card--selected {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.28) !important;
  background: rgba(56, 189, 248, 0.06) !important;
}
.ple-block-card--active {
  border-color: rgba(0, 230, 118, 0.25);
  background: rgba(0, 230, 118, 0.03);
}
.ple-block-card--inactive {
  opacity: 0.62;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.25);
}
.ple-block-card--inactive:hover {
  opacity: 0.95;
  border-color: rgba(255, 255, 255, 0.15);
}
.ple-block-card--preview-hidden {
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.03);
}
.ple-block-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  user-select: none;
}
.ple-block-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ple-block-card-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ple-block-card-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ple-block-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.ple-block-card-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.ple-block-card-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ple-eye-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 6px;
  height: 26px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.ple-eye-btn-text {
  font-size: 0.68rem;
  font-weight: 600;
}
.ple-eye-btn--on {
  color: var(--primary, #00e676);
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.08);
}
.ple-eye-btn--on:hover {
  background: rgba(0, 230, 118, 0.2);
  color: #fff;
  border-color: var(--primary, #00e676);
  transform: scale(1.02);
}
.ple-eye-btn--off {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.12);
}
.ple-eye-btn--off:hover {
  background: rgba(251, 191, 36, 0.25);
  color: #fff;
  transform: scale(1.02);
}
.ple-expand-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.15s ease,
    background 0.15s ease;
}
.ple-expand-indicator.expanded {
  transform: rotate(180deg);
  color: var(--primary, #00e676);
  background: rgba(0, 230, 118, 0.1);
  border-color: rgba(0, 230, 118, 0.25);
}
.ple-block-status-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ple-block-status-tag.active {
  background: rgba(0, 230, 118, 0.12);
  color: var(--primary, #00e676);
  border: 1px solid rgba(0, 230, 118, 0.3);
}
.ple-block-status-tag.inactive {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.28);
}
.ple-block-status-tag--preview-hidden {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.ple-block-card-body {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pleCardBodyOpen 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pleCardBodyOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ple-block-card-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  white-space: normal;
  line-height: 1.45;
  margin: 0;
}
.ple-block-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: 2px;
  gap: 8px;
}
.ple-block-actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ple-block-actions-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ple-block-action-btn {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ple-block-action-btn--delete {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #f87171;
}
.ple-block-action-btn--delete:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}
.ple-block-action-btn--add {
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.32);
  color: var(--primary, #00e676);
}
.ple-block-action-btn--add:hover {
  background: var(--primary, #00e676);
  color: #0b1320;
  border-color: var(--primary, #00e676);
  box-shadow: 0 3px 10px rgba(0, 230, 118, 0.35);
  transform: translateY(-1px);
}
.ple-block-action-btn--media {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
.ple-block-action-btn--media:hover {
  background: #38bdf8;
  color: #0b1320;
  border-color: #38bdf8;
  box-shadow: 0 3px 10px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}
.ple-error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.82rem;
  margin-bottom: 16px;
  gap: 8px;
}
.ple-error-dismiss {
  background: none;
  border: none;
  color: #fca5a5;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.ple-error-dismiss:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
}
.ple-media-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  gap: 12px;
  transition: border-color 0.2s;
}
.ple-media-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.ple-media-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ple-media-card-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-bottom: 2px;
}
.ple-media-card-sub {
  display: block;
  font-size: 0.73rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.3;
}
.ple-logo-preview-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 12px;
}
.ple-logo-preview-img-wrap {
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ple-logo-preview-img {
  max-height: 38px;
  max-width: 140px;
  object-fit: contain;
}
.ple-remove-media-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.ple-remove-media-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}
.ple-empty-media-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
}
.ple-hero-preview-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ple-hero-preview-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}
.ple-hero-remove-btn {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}
.ple-hero-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #f87171;
}
.ple-upload-actions-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ple-upload-prominent-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--text-primary, #ffffff);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ple-upload-prominent-btn:hover:not(:disabled) {
  background: rgba(0, 230, 118, 0.12);
  border-color: var(--primary, #00e676);
  color: var(--primary, #00e676);
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.2);
}
.ple-upload-prominent-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ple-upload-prominent-btn--hero {
  background:
    linear-gradient(
      135deg,
      rgba(0, 230, 118, 0.15) 0%,
      rgba(0, 230, 118, 0.05) 100%);
  border-color: rgba(0, 230, 118, 0.35);
  color: var(--primary, #00e676);
}
.ple-upload-prominent-btn--hero:hover:not(:disabled) {
  background: var(--primary, #00e676);
  color: #0b1320;
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.3);
}
.ple-url-fallback-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ple-hint-label {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}
.ple-image-customizer-box {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ple-image-customizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}
.ple-image-customizer-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ple-image-size-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary, #00e676);
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.25);
  padding: 2px 8px;
  border-radius: 9999px;
}
.ple-expand-banner-cta-wrap {
  width: 100%;
}
.ple-expand-banner-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background:
    linear-gradient(
      135deg,
      rgba(56, 189, 248, 0.15) 0%,
      rgba(0, 230, 118, 0.15) 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.ple-expand-banner-btn:hover {
  background:
    linear-gradient(
      135deg,
      #38bdf8 0%,
      #00e676 100%);
  color: #0b1320;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}
.ple-expand-banner-btn--active {
  background: rgba(0, 230, 118, 0.15);
  border-color: rgba(0, 230, 118, 0.5);
  color: var(--primary, #00e676);
}
.ple-expand-banner-btn--active:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}
.ple-customizer-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ple-customizer-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ple-customizer-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}
.ple-customizer-val-pill {
  font-size: 0.7rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 1px 7px;
  border-radius: 4px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.ple-mode-pill-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  width: 100%;
}
.ple-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.ple-mode-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.ple-mode-pill.active {
  background: rgba(0, 230, 118, 0.14);
  border-color: rgba(0, 230, 118, 0.45);
  color: var(--primary, #00e676);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.18);
}
.ple-height-presets {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ple-preset-btn {
  flex: 1;
  min-width: 55px;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
}
.ple-preset-btn small {
  font-size: 0.62rem;
  opacity: 0.75;
}
.ple-preset-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.ple-preset-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-weight: 700;
}
.ple-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.ple-range-min,
.ple-range-max {
  font-size: 0.66rem;
  color: #64748b;
  font-family:
    ui-monospace,
    SFMono-Regular,
    monospace;
  white-space: nowrap;
}
.ple-range-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
  transition: background 0.18s;
}
.ple-range-slider:hover {
  background: rgba(255, 255, 255, 0.2);
}
.ple-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary, #00e676);
  border: 2px solid #0b1320;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.5);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ple-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.8);
}
.ple-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ple-color-input {
  width: 44px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a3e);
  background: none;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.ple-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.ple-color-input::-webkit-color-swatch {
  border-radius: 6px;
  border: none;
}
.ple-input--hex {
  max-width: 110px;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.ple-cta-preview {
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  transition: background 0.2s;
  opacity: 0.9;
}
[data-theme=light] .ple-page {
  background: #f1f5f9;
}
[data-theme=light] .ple-toolbar {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .ple-back-btn {
  border-color: #cbd5e1;
  color: #334155;
}
[data-theme=light] .ple-back-btn:hover {
  color: #0f172a;
  border-color: #94a3b8;
}
[data-theme=light] .ple-toolbar-title {
  color: #0f172a;
}
[data-theme=light] .ple-form-panel {
  background: #ffffff;
  border-right-color: #e2e8f0;
}
[data-theme=light] .ple-form-section-title {
  color: #0f172a;
}
[data-theme=light] .ple-form-section-sub,
[data-theme=light] .ple-section-heading,
[data-theme=light] .ple-label {
  color: #475569;
}
[data-theme=light] .ple-divider {
  border-top-color: #e2e8f0;
}
[data-theme=light] .ple-input,
[data-theme=light] .ple-textarea {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .ple-input:focus,
[data-theme=light] .ple-textarea:focus {
  background: #ffffff;
  border-color: #10b981;
}
[data-theme=light] .ple-hint {
  color: #64748b;
}
[data-theme=light] .ple-save-btn,
[data-theme=light] .ple-save-btn-lg {
  background:
    linear-gradient(
      135deg,
      #10b981 0%,
      #059669 100%);
  color: #ffffff;
}
[data-theme=light] .ple-preview-header {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
  color: #475569;
}
[data-theme=light] .ple-preview-hint {
  color: #64748b;
}
[data-theme=light] .ple-color-input {
  border-color: #cbd5e1;
}
[data-theme=light] .ple-logo-preview {
  background: #f8fafc;
  border-color: #cbd5e1;
}
[data-theme=light] .ple-upload-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[data-theme=light] .ple-upload-btn:hover {
  background: #e2e8f0;
}
[data-theme=light] .ple-preview-body {
  background: #e2e8f0;
}
[data-theme=light] .ple-device-toggle {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[data-theme=light] .ple-device-btn {
  color: #64748b;
}
[data-theme=light] .ple-device-btn:hover:not(.active) {
  color: #0f172a;
  background: #e2e8f0;
}
[data-theme=light] .ple-device-btn.active {
  background: #10b981;
  color: #ffffff;
}
[data-theme=light] .ple-block-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme=light] .ple-block-card--active {
  border-color: #10b981;
  background: #f0fdf4;
}
[data-theme=light] .ple-block-card--inactive {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[data-theme=light] .ple-block-card-name {
  color: #0f172a;
}
[data-theme=light] .ple-block-card-desc {
  color: #64748b;
}
[data-theme=light] .ple-block-variant-box {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[data-theme=light] .ple-variant-select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .ple-variant-select:hover {
  background: #f8fafc;
  border-color: #10b981;
}
[data-theme=light] .ple-hero-remove-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
[data-theme=light] .ple-media-card {
  background: #ffffff;
  border-color: #e2e8f0;
}
[data-theme=light] .ple-media-card-title {
  color: #0f172a;
}
[data-theme=light] .ple-media-card-sub {
  color: #64748b;
}
[data-theme=light] .ple-image-customizer-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme=light] .ple-image-customizer-title {
  color: #1e293b;
}
[data-theme=light] .ple-mode-pill {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}
[data-theme=light] .ple-mode-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
[data-theme=light] .ple-mode-pill.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}
[data-theme=light] .ple-preset-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}
[data-theme=light] .ple-preset-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme=light] .ple-preset-btn.active {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0369a1;
}
[data-theme=light] .ple-range-slider {
  background: #cbd5e1;
}
[data-theme=light] .ple-logo-preview-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme=light] .ple-empty-media-badge {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #64748b;
}
[data-theme=light] .ple-upload-prominent-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme=light] .ple-upload-prominent-btn:hover:not(:disabled) {
  background: #f0fdf4;
  border-color: #10b981;
  color: #059669;
}
[data-theme=light] .ple-upload-prominent-btn--hero {
  background: #f0fdf4;
  border-color: #a7f3d0;
  color: #059669;
}
[data-theme=light] .ple-upload-prominent-btn--hero:hover:not(:disabled) {
  background: #10b981;
  color: #ffffff;
}
.ple-blocks-header-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.ple-blocks-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ple-blocks-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ple-open-library-btn {
  background:
    linear-gradient(
      135deg,
      rgba(0, 230, 118, 0.15) 0%,
      rgba(56, 189, 248, 0.15) 100%);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: var(--primary, #00e676);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ple-open-library-btn:hover {
  background: var(--primary, #00e676);
  color: #0b1320;
  border-color: var(--primary, #00e676);
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.3);
}
.ple-tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  margin-bottom: 12px;
  overflow: visible;
}
.ple-tag-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}
.ple-tag-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.ple-tag-filter-btn.active {
  background: rgba(0, 230, 118, 0.15);
  border-color: rgba(0, 230, 118, 0.45);
  color: var(--primary, #00e676);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.15);
}
.ple-tag-filter-code {
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 0.72rem;
  font-weight: 700;
}
.ple-tag-filter-count {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0.85;
}
.ple-block-html-tag {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
}
.ple-block-variant-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
}
.ple-variant-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ple-variant-box-label {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ple-variant-count-badge {
  font-size: 0.65rem;
  color: var(--primary, #00e676);
  background: rgba(0, 230, 118, 0.1);
  padding: 1px 7px;
  border-radius: 9999px;
  font-weight: 600;
}
.ple-variant-select-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.ple-variant-select {
  width: 100%;
  background: #0d1522;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 34px 8px 12px;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ple-variant-select:hover {
  border-color: rgba(0, 230, 118, 0.4);
  background: #111c2e;
}
.ple-variant-select:focus {
  border-color: var(--primary, #00e676);
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.18);
}
.ple-variant-select-arrow {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: #94a3b8;
  font-size: 18px;
}
.ple-library-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pleFadeIn 0.2s ease-out;
}
@keyframes pleFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.ple-library-modal {
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: #131722;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 230, 118, 0.1);
}
.ple-library-modal-header {
  padding: 18px 24px;
  background: #181d2a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ple-library-modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ple-library-icon {
  font-size: 1.8rem;
}
.ple-library-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px;
}
.ple-library-sub {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}
.ple-library-sub code {
  color: var(--primary, #00e676);
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
}
.ple-library-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ple-library-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.ple-library-filter-strip {
  padding: 14px 24px;
  background: #151925;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ple-library-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1017;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0 12px;
}
.ple-library-search-icon {
  font-size: 14px;
  color: #64748b;
}
.ple-library-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f1f5f9;
  font-size: 0.85rem;
  padding: 10px 0;
}
.ple-library-search-clear {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
}
.ple-library-search-clear:hover {
  color: #fff;
}
.ple-library-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow: visible;
}
.ple-library-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s;
}
.ple-library-tab code {
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
}
.ple-library-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.ple-library-tab.active {
  background: rgba(0, 230, 118, 0.15);
  border-color: rgba(0, 230, 118, 0.4);
  color: var(--primary, #00e676);
}
.ple-library-tab-count {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.7rem;
}
.ple-library-grid {
  padding: 20px 24px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.ple-library-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.ple-library-card:hover {
  border-color: rgba(0, 230, 118, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ple-library-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ple-library-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ple-library-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
}
.ple-library-card-icon {
  font-size: 1.2rem;
}
.ple-library-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 6px;
}
.ple-library-card-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0 0 10px;
  flex: 1;
}
.ple-library-snippet {
  background: #090c12;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.ple-library-snippet pre {
  margin: 0;
}
.ple-library-snippet code {
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 0.7rem;
  color: #a5f3fc;
  line-height: 1.3;
}
.ple-library-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.ple-library-current-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary, #00e676);
  background: rgba(0, 230, 118, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
}
.ple-library-action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}
.ple-library-action-btn--add {
  background: var(--primary, #00e676);
  color: #0b1320;
}
.ple-library-action-btn--add:hover {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(0, 230, 118, 0.3);
}
.ple-library-action-btn--select {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}
.ple-library-action-btn--select:hover {
  background: #38bdf8;
  color: #0b1320;
}
.ple-library-action-btn--remove {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  color: #ff6b81;
}
.ple-library-action-btn--remove:hover {
  background: #ff4d6d;
  color: #fff;
}
.ple-library-action-btn--config {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}
.ple-library-action-btn--config:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* src/pages/AutoContratacao/AutoContratacao.css */
.plp-page {
  padding: 28px 32px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
}
.plp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.plp-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 4px;
}
.plp-page-sub {
  color: var(--text-muted, #888);
  margin: 0;
}
.plp-page-stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.plp-stat-pill {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 12px;
  padding: 10px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plp-stat-pill span:first-child {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.plp-stat-pill span:last-child {
  font-size: 0.72rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plp-stat-pill--green span:first-child {
  color: #00e676;
}
.plp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #2a2a3e);
  margin-bottom: 28px;
}
.plp-tab {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plp-tab:hover {
  color: var(--text-primary, #fff);
}
.plp-tab.active {
  color: var(--primary, #00e676);
  border-bottom-color: var(--primary, #00e676);
  font-weight: 600;
}
.plp-tab-count {
  background: var(--primary, #00e676);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}
.plp-loading,
.plp-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted, #888);
}
.plp-empty span {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}
.plp-empty p {
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--text-primary, #eee);
}
.plp-empty small {
  font-size: 0.82rem;
}
.plp-empty-cta {
  margin-top: 20px;
  background: var(--primary, #00e676);
  color: #000;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}
.plp-empty-cta:hover {
  opacity: 0.85;
}
.plp-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.plp-catalog-card {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.plp-catalog-card:hover {
  border-color: var(--primary, #00e676);
  transform: translateY(-2px);
}
.plp-catalog-preview {
  height: 200px;
  overflow: hidden;
  background: #0a0a14;
  position: relative;
}
.plp-catalog-preview-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 0.28);
  height: calc(100% / 0.28);
  transform: scale(0.28);
  transform-origin: top left;
  pointer-events: none;
}
.plp-catalog-info {
  padding: 14px 16px 10px;
  flex: 1;
}
.plp-catalog-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary, #00e676);
  font-weight: 600;
}
.plp-catalog-title {
  margin: 4px 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.plp-catalog-eyebrow {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  margin: 0;
}
.plp-catalog-use-btn {
  margin: 0 16px 16px;
  padding: 10px;
  background: var(--primary, #00e676);
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 0.2s;
  text-align: center;
}
.plp-catalog-use-btn:hover {
  opacity: 0.85;
}
.plp-my-lps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plp-my-card {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.2s;
}
.plp-my-card--published {
  border-color: #00e67640;
}
.plp-my-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.plp-status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 4px;
}
.plp-status-badge.published {
  color: #00e676;
}
.plp-status-badge.draft {
  color: #888;
}
.plp-my-card-label {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.plp-my-card-template {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #888);
}
.plp-my-card-count {
  text-align: right;
  flex-shrink: 0;
}
.plp-count-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  line-height: 1;
}
.plp-count-label {
  font-size: 0.7rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
}
.plp-my-card-url {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-main, #12121a);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.plp-url-text {
  font-size: 0.8rem;
  color: var(--primary, #00e676);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-family: "Courier New", monospace;
}
.plp-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  padding: 2px;
  transition: transform 0.1s;
}
.plp-copy-btn:hover {
  transform: scale(1.15);
}
.plp-my-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.plp-action-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border, #2a2a3e);
  background: none;
  color: var(--text-primary, #fff);
  transition: all 0.15s;
}
.plp-action-btn:hover {
  background: var(--border, #2a2a3e);
}
.plp-action-btn--edit {
  color: #64b5f6;
  border-color: #64b5f640;
}
.plp-action-btn--edit:hover {
  background: #64b5f615;
}
.plp-action-btn--publish {
  color: #00e676;
  border-color: #00e67640;
}
.plp-action-btn--publish:hover {
  background: #00e67615;
}
.plp-action-btn--unpublish {
  color: #ffb74d;
  border-color: #ffb74d40;
}
.plp-action-btn--unpublish:hover {
  background: #ffb74d15;
}
.plp-action-btn--leads {
  color: #b39ddb;
  border-color: #b39ddb40;
}
.plp-action-btn--leads:hover {
  background: #b39ddb15;
}
.plp-action-btn--delete {
  color: #ef5350;
  border-color: #ef535040;
}
.plp-action-btn--delete:hover {
  background: #ef535015;
}
.plp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.plp-modal {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 16px;
  width: 100%;
  max-width: 860px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.plp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border, #2a2a3e);
}
.plp-modal-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}
.plp-modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.plp-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.plp-loading-text,
.plp-empty-text {
  color: var(--text-muted, #888);
  text-align: center;
  padding: 40px;
}
.plp-leads-total {
  font-size: 0.85rem;
  color: var(--text-muted, #888);
  margin-bottom: 12px;
}
.plp-leads-table-wrap {
  overflow-x: auto;
}
.plp-leads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.plp-leads-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text-muted, #888);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border, #2a2a3e);
}
.plp-leads-table td {
  padding: 10px 12px;
  color: var(--text-primary, #eee);
  border-bottom: 1px solid var(--border, #2a2a3e);
}
.plp-leads-table tr:hover td {
  background: var(--bg-main, #12121a);
}
[data-theme=light] .plp-page-title {
  color: #0f172a;
}
[data-theme=light] .plp-page-sub {
  color: #64748b;
}
[data-theme=light] .plp-stat-pill {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .plp-stat-pill span:first-child {
  color: #0f172a;
}
[data-theme=light] .plp-stat-pill span:last-child {
  color: #64748b;
}
[data-theme=light] .plp-stat-pill--green span:first-child {
  color: #10b981;
}
[data-theme=light] .plp-tabs {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .plp-tab {
  color: #64748b;
}
[data-theme=light] .plp-tab:hover {
  color: #0f172a;
}
[data-theme=light] .plp-tab.active {
  color: #059669;
  border-bottom-color: #059669;
}
[data-theme=light] .plp-tab-count {
  background: #10b981;
  color: #ffffff;
}
[data-theme=light] .plp-catalog-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
[data-theme=light] .plp-catalog-card:hover {
  border-color: #10b981;
}
[data-theme=light] .plp-catalog-title {
  color: #0f172a;
}
[data-theme=light] .plp-catalog-eyebrow {
  color: #64748b;
}
[data-theme=light] .plp-catalog-use-btn {
  background:
    linear-gradient(
      135deg,
      #10b981 0%,
      #059669 100%);
  color: #ffffff;
}
[data-theme=light] .plp-my-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .plp-my-card--published {
  border-color: #a7f3d0;
}
[data-theme=light] .plp-my-card-label {
  color: #0f172a;
}
[data-theme=light] .plp-my-card-template {
  color: #64748b;
}
[data-theme=light] .plp-count-number {
  color: #0f172a;
}
[data-theme=light] .plp-count-label {
  color: #64748b;
}
[data-theme=light] .plp-my-card-url {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}
[data-theme=light] .plp-url-text {
  color: #047857;
}
[data-theme=light] .plp-action-btn {
  border-color: #cbd5e1;
  color: #334155;
  background: #ffffff;
}
[data-theme=light] .plp-action-btn:hover {
  background: #f1f5f9;
}
[data-theme=light] .plp-action-btn--edit {
  color: #2563eb;
  border-color: #bfdbfe;
}
[data-theme=light] .plp-action-btn--edit:hover {
  background: #eff6ff;
}
[data-theme=light] .plp-action-btn--publish {
  color: #059669;
  border-color: #a7f3d0;
}
[data-theme=light] .plp-action-btn--publish:hover {
  background: #ecfdf5;
}
[data-theme=light] .plp-action-btn--unpublish {
  color: #d97706;
  border-color: #fde68a;
}
[data-theme=light] .plp-action-btn--unpublish:hover {
  background: #fffbeb;
}
[data-theme=light] .plp-action-btn--leads {
  color: #7c3aed;
  border-color: #ddd6fe;
}
[data-theme=light] .plp-action-btn--leads:hover {
  background: #f5f3ff;
}
[data-theme=light] .plp-action-btn--delete {
  color: #dc2626;
  border-color: #fca5a5;
}
[data-theme=light] .plp-action-btn--delete:hover {
  background: #fef2f2;
}
[data-theme=light] .plp-modal {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme=light] .plp-modal-header {
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .plp-modal-header h2 {
  color: #0f172a;
}
[data-theme=light] .plp-modal-close {
  color: #64748b;
}
[data-theme=light] .plp-leads-total {
  color: #64748b;
}
[data-theme=light] .plp-leads-table th {
  color: #475569;
  border-bottom-color: #e2e8f0;
}
[data-theme=light] .plp-leads-table td {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}
[data-theme=light] .plp-leads-table tr:hover td {
  background: #f8fafc;
}
[data-theme=light] .plp-empty p {
  color: #0f172a;
}
[data-theme=light] .plp-empty small,
[data-theme=light] .plp-loading,
[data-theme=light] .plp-empty-text,
[data-theme=light] .plp-loading-text {
  color: #64748b;
}

/* src/pages/VenttuDashboard/VenttuDashboard.css */
.vtd-page {
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 32px 48px;
  color: #f5f4ff;
  background:
    radial-gradient(
      circle at top right,
      rgba(34, 21, 81, 0.55),
      transparent 55%),
    #0d0a1a;
  font-family:
    "Plus Jakarta Sans",
    "Inter",
    system-ui,
    sans-serif;
}
.vtd-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}
.vtd-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      #221551 0%,
      #160d36 100%);
  border: 1px solid rgba(241, 255, 0, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  margin-bottom: 24px;
}
.vtd-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vtd-brand-badge {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #f1ff00;
  color: #221551;
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(241, 255, 0, 0.35);
}
.vtd-title-wrap h1 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vtd-pill-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(241, 255, 0, 0.14);
  color: #f1ff00;
  border: 1px solid rgba(241, 255, 0, 0.35);
}
.vtd-title-wrap p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #cbc3e3;
}
.vtd-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vtd-period-group {
  display: flex;
  background: rgba(13, 10, 26, 0.65);
  padding: 4px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.vtd-period-btn {
  background: transparent;
  border: none;
  color: #cbc3e3;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.vtd-period-btn:hover {
  color: #ffffff;
}
.vtd-period-btn.active {
  background: #f1ff00;
  color: #221551;
  font-weight: 800;
}
.vtd-btn-refresh,
.vtd-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}
.vtd-btn-refresh:hover,
.vtd-btn-secondary:hover {
  border-color: #f1ff00;
  color: #f1ff00;
  background: rgba(241, 255, 0, 0.08);
}
.vtd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.vtd-kpi-card {
  background: #17112b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.vtd-kpi-card:hover {
  border-color: rgba(241, 255, 0, 0.35);
  transform: translateY(-2px);
}
.vtd-kpi-card--highlight {
  background:
    linear-gradient(
      145deg,
      #221551 0%,
      #17112b 100%);
  border: 1px solid rgba(241, 255, 0, 0.45);
  box-shadow: 0 10px 28px rgba(34, 21, 81, 0.5);
}
.vtd-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cbc3e3;
}
.vtd-kpi-value {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.vtd-kpi-value--yellow {
  color: #f1ff00;
}
.vtd-kpi-sub {
  font-size: 0.78rem;
  color: #a79ec7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vtd-middle-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .vtd-middle-grid {
    grid-template-columns: 1fr;
  }
}
.vtd-panel {
  background: #17112b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 20px;
}
.vtd-panel-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vtd-product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .vtd-product-split {
    grid-template-columns: 1fr;
  }
}
.vtd-prod-box {
  background: rgba(13, 10, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 15px 16px;
}
.vtd-prod-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.vtd-prod-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vtd-prod-badge.clt {
  background: rgba(241, 255, 0, 0.16);
  color: #f1ff00;
  border: 1px solid rgba(241, 255, 0, 0.4);
}
.vtd-prod-badge.fgts {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.vtd-prod-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vtd-prod-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #cbc3e3;
}
.vtd-prod-metric-row strong {
  color: #ffffff;
  font-weight: 800;
}
.vtd-prod-metric-row strong.accent {
  color: #f1ff00;
}
.vtd-lp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vtd-lp-item {
  background: rgba(13, 10, 26, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vtd-lp-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vtd-lp-name {
  font-size: 0.84rem;
  font-weight: 800;
  color: #ffffff;
}
.vtd-lp-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vtd-lp-url-code {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.73rem;
  color: #f1ff00;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vtd-mini-btn {
  background: #f1ff00;
  color: #221551;
  border: none;
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vtd-mini-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.vtd-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.vtd-tabs {
  display: flex;
  gap: 8px;
}
.vtd-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbc3e3;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.vtd-tab-btn.active {
  background: #f1ff00;
  color: #221551;
  border-color: #f1ff00;
  font-weight: 800;
}
.vtd-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.vtd-input-search,
.vtd-select {
  background: #120d24;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.8rem;
  padding: 8px 12px;
  border-radius: 10px;
  outline: none;
}
.vtd-input-search:focus,
.vtd-select:focus {
  border-color: #f1ff00;
}
.vtd-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vtd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
}
.vtd-table th {
  background: rgba(34, 21, 81, 0.65);
  color: #cbc3e3;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vtd-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #e2ddf5;
  vertical-align: middle;
}
.vtd-table tr:hover td {
  background: rgba(241, 255, 0, 0.03);
}
.vtd-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.vtd-status-pill.int,
.vtd-status-pill.disponivel {
  background: rgba(78, 222, 163, 0.16);
  color: #4edea3;
  border: 1px solid rgba(78, 222, 163, 0.35);
}
.vtd-status-pill.and,
.vtd-status-pill.pendente,
.vtd-status-pill.autorizado {
  background: rgba(241, 255, 0, 0.15);
  color: #f1ff00;
  border: 1px solid rgba(241, 255, 0, 0.35);
}
.vtd-status-pill.pen {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.vtd-status-pill.rep,
.vtd-status-pill.erro,
.vtd-status-pill.timeout {
  background: rgba(244, 63, 94, 0.16);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
}
.vtd-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9b92b8;
  font-size: 0.88rem;
}
.vtd-cpf-code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 0.76rem;
  color: #e2ddf5;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 7px;
  border-radius: 6px;
}
.vtd-subtab-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vtd-info-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(34, 21, 81, 0.75),
      rgba(18, 13, 36, 0.9));
  border: 1px solid rgba(241, 255, 0, 0.25);
}
.vtd-info-title {
  margin: 0 0 4px;
  font-size: 0.96rem;
  font-weight: 800;
  color: #ffffff;
}
.vtd-info-desc {
  margin: 0;
  font-size: 0.8rem;
  color: #cbc3e3;
  max-width: 780px;
  line-height: 1.45;
}
.vtd-btn-primary {
  background: #f1ff00;
  color: #221551;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(241, 255, 0, 0.25);
  transition: transform 0.15s ease;
}
.vtd-btn-primary:hover {
  transform: translateY(-1px);
}
.vtd-ref-badge {
  background: rgba(241, 255, 0, 0.14);
  color: #f1ff00;
  border: 1px solid rgba(241, 255, 0, 0.35);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}
.vtd-login-pill {
  background: rgba(78, 222, 163, 0.14);
  color: #4edea3;
  border: 1px solid rgba(78, 222, 163, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}
.vtd-profile-badge {
  display: inline-block;
  background: rgba(78, 53, 255, 0.22);
  color: #d8d1ff;
  border: 1px solid rgba(78, 53, 255, 0.45);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.vtd-mini-btn--danger {
  background: rgba(244, 63, 94, 0.16);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
}
.vtd-comm-cell {
  font-size: 0.77rem;
  line-height: 1.35;
}
.vtd-comm-label {
  color: #a79ec7;
}
.vtd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 18, 0.82);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vtd-modal {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: #17112b;
  border: 1px solid rgba(241, 255, 0, 0.35);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}
.vtd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      135deg,
      #221551,
      #17112b);
}
.vtd-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
}
.vtd-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
}
.vtd-modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vtd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .vtd-form-grid {
    grid-template-columns: 1fr;
  }
}
.vtd-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vtd-form-field label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #cbc3e3;
}
.vtd-form-field input,
.vtd-form-field select {
  background: #100b20;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  outline: none;
}
.vtd-form-field input:focus,
.vtd-form-field select:focus {
  border-color: #f1ff00;
}
.vtd-form-field small {
  font-size: 0.7rem;
  color: #9b92b8;
}
.vtd-commission-box,
.vtd-login-box {
  background: rgba(13, 10, 26, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 15px 16px;
}
.vtd-commission-box h4 {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: #f1ff00;
}
.vtd-comm-box-sub {
  margin: 0 0 12px;
  font-size: 0.76rem;
  color: #cbc3e3;
}
.vtd-cascade-preview {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(78, 222, 163, 0.1);
  border: 1px solid rgba(78, 222, 163, 0.35);
  font-size: 0.77rem;
  color: #e2ddf5;
}
.vtd-cascade-preview--error {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.45);
}
.vtd-checkbox-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vtd-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #e2ddf5;
  cursor: pointer;
}
.vtd-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vtd-alert-error {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fda4af;
  font-size: 0.8rem;
}
.vtd-profile-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.vtd-profile-card {
  background: rgba(13, 10, 26, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vtd-profile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.vtd-profile-card-head h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: #ffffff;
}
.vtd-scope-tag {
  font-size: 0.7rem;
  color: #f1ff00;
  font-weight: 700;
}
.vtd-linked-count {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 9px;
  border-radius: 999px;
  color: #cbc3e3;
}
.vtd-profile-card-desc {
  margin: 0;
  font-size: 0.78rem;
  color: #a79ec7;
}
.vtd-profile-comm-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.vtd-perm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vtd-perm-pill {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.vtd-perm-pill.on {
  background: rgba(78, 222, 163, 0.14);
  color: #4edea3;
}
.vtd-perm-pill.off {
  background: rgba(255, 255, 255, 0.05);
  color: #7c7399;
}
.vtd-profile-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.vtd-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 16px;
}
@media (max-width: 960px) {
  .vtd-analytics-grid {
    grid-template-columns: 1fr;
  }
}
.vtd-analytics-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vtd-feedback-banner {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(78, 222, 163, 0.14);
  border: 1px solid rgba(78, 222, 163, 0.35);
  color: #4edea3;
  font-size: 0.78rem;
  font-weight: 700;
}
.vtd-funnel-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.vtd-funnel-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vtd-funnel-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
}
.vtd-funnel-step-name {
  font-weight: 700;
  color: #ffffff;
}
.vtd-funnel-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.vtd-funnel-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
}

/* src/pages/BanksoftDocs/BanksoftDocs.css */
.doc-hub-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family:
    var(--font-primary),
    "Inter",
    sans-serif;
}
.doc-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height, 60px);
  padding: 0 24px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.doc-hub-logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}
.doc-hub-logo-img {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}
.doc-hub-logo-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.5px;
}
.doc-hub-nav-links {
  display: flex;
  gap: 20px;
}
.doc-hub-nav-link {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  cursor: pointer;
}
.doc-hub-nav-link.active,
.doc-hub-nav-link:hover {
  color: var(--color-accent);
}
.doc-hub-search-container {
  display: flex;
  align-items: center;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 12px;
  width: 240px;
  gap: 8px;
}
.doc-hub-search-input {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 12px;
  width: 100%;
}
.doc-hub-search-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
}
.doc-hub-search-input:focus {
  outline: none;
}
.doc-hub-search-badge {
  font-size: 10px;
  background-color: var(--color-surface-3);
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}
.doc-hub-right-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.doc-hub-action-item {
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.doc-hub-action-item:hover {
  color: var(--color-text);
}
.doc-hub-viewport {
  display: flex;
  flex: 1;
  min-width: 0;
}
.doc-hub-sidebar {
  width: 280px;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: calc(100vh - var(--header-height, 60px));
  position: sticky;
  top: var(--header-height, 60px);
  padding: 20px 0;
}
.doc-hub-sidebar-group {
  margin-bottom: 16px;
}
.doc-hub-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin: 0 12px 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  background-color: var(--color-accent-glow);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.doc-hub-sidebar-title:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.doc-hub-chevron {
  transition: transform 0.2s;
}
.doc-hub-chevron.collapsed {
  transform: rotate(-90deg);
}
.doc-hub-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px;
}
.doc-hub-sidebar-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.doc-hub-sidebar-item:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}
.doc-hub-sidebar-item.active {
  background-color: var(--color-accent-glow);
  color: var(--color-accent);
  font-weight: 600;
  border-left: 2px solid var(--color-accent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.doc-hub-content {
  flex: 1;
  padding: 40px 48px;
  overflow-y: auto;
  min-width: 0;
  height: calc(100vh - var(--header-height, 60px));
}
.doc-hub-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}
.doc-hub-h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.doc-hub-h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 32px 0 16px;
}
.doc-hub-p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}
.doc-hub-code {
  font-family: "JetBrains Mono", monospace;
  background-color: var(--color-surface-3);
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}
.doc-hub-table-wrapper {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: 12px;
  margin: 20px 0;
  overflow-x: auto;
}
.doc-hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.doc-hub-table th,
.doc-hub-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.doc-hub-table th {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 12px;
}
.doc-hub-table td.field {
  font-family: "JetBrains Mono", monospace;
  color: var(--color-text);
  font-weight: 600;
}
.doc-hub-table td.type {
  color: var(--color-text-secondary);
  opacity: 0.8;
}
.doc-hub-table td.required {
  color: var(--color-error);
  font-weight: 600;
}
.doc-hub-alert {
  background: var(--color-error-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-sm, 6px);
  padding: 16px 20px;
  margin: 24px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.doc-hub-alert-icon {
  font-size: 18px;
  margin-top: 2px;
}
.doc-hub-alert-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-error);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.doc-hub-alert-desc {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}
.doc-hub-code-card {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-3);
  border-radius: var(--radius-md, 12px);
  margin: 20px 0;
  overflow: hidden;
}
.doc-hub-code-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.doc-hub-code-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.doc-hub-code-langs {
  display: flex;
  gap: 4px;
}
.doc-hub-code-lang-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}
.doc-hub-code-lang-btn.active {
  background-color: var(--color-surface);
  color: var(--color-accent);
}
.doc-hub-code-body {
  position: relative;
  padding: 16px;
  background-color: var(--color-bg);
  overflow-x: auto;
  max-width: 100%;
}
.doc-hub-code-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  font-weight: 500;
}
.doc-hub-code-copy:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.doc-hub-pre {
  margin: 0;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
}
.doc-hub-response-box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 12px;
  margin-top: 10px;
  overflow-x: auto;
  max-width: 100%;
}
.doc-hub-response-pre {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--color-success, #4ade80);
  line-height: 1.4;
  overflow-x: auto;
  max-width: 100%;
}
.doc-hub-endpoint-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.doc-hub-method {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.doc-hub-method.post {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.doc-hub-method.patch {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
.doc-hub-method.get {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}
.doc-hub-path {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.doc-hub-subroute-card {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 12px;
  margin-bottom: 10px;
}
.doc-hub-toc {
  width: 240px;
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--header-height, 60px);
  height: calc(100vh - var(--header-height, 60px));
  overflow-y: auto;
  background-color: var(--color-surface);
}
.doc-hub-toc-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.doc-hub-toc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-hub-toc-link {
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  cursor: pointer;
  line-height: 1.4;
}
.doc-hub-toc-link:hover,
.doc-hub-toc-link.active {
  color: var(--color-accent);
}
@media (max-width: 1024px) {
  .doc-hub-viewport {
    flex-direction: column;
  }
  .doc-hub-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
  }
  .doc-hub-toc {
    display: none;
  }
  .doc-hub-content {
    padding: 24px;
    height: auto;
  }
}
.doc-hub-auth-btn {
  background-color: var(--color-accent-dark, #2DD4A0) !important;
  border: 1px solid var(--color-accent-dark, #2DD4A0) !important;
  color: #0A0A0A !important;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.2s ease-in-out;
}
.doc-hub-auth-btn:hover {
  background-color: var(--color-accent, #4AFFC5) !important;
  border-color: var(--color-accent, #4AFFC5) !important;
  color: #000000 !important;
}
.doc-hub-auth-btn.authorized {
  background-color: var(--color-accent-dark, #2DD4A0) !important;
  border-color: var(--color-accent-dark, #2DD4A0) !important;
  color: #0A0A0A !important;
  font-weight: 800;
}
.doc-hub-auth-btn.authorized:hover {
  background-color: var(--color-accent, #4AFFC5) !important;
  border-color: var(--color-accent, #4AFFC5) !important;
  color: #000000 !important;
}
[data-theme=light] .doc-hub-auth-btn {
  background-color: var(--color-accent, #1A6BE8) !important;
  border-color: var(--color-accent, #1A6BE8) !important;
  color: #ffffff !important;
}
[data-theme=light] .doc-hub-auth-btn:hover {
  background-color: var(--color-accent-dark, #1250B0) !important;
  border-color: var(--color-accent-dark, #1250B0) !important;
  color: #ffffff !important;
}
[data-theme=light] .doc-hub-auth-btn.authorized {
  background-color: var(--color-accent, #1A6BE8) !important;
  border-color: var(--color-accent, #1A6BE8) !important;
  color: #ffffff !important;
}
[data-theme=light] .doc-hub-auth-btn.authorized:hover {
  background-color: var(--color-accent-dark, #1250B0) !important;
  border-color: var(--color-accent-dark, #1250B0) !important;
  color: #ffffff !important;
}
.doc-hub-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.doc-hub-modal-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  width: 480px;
  max-width: 90%;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: doc-hub-fade-in-up 0.2s ease-out;
}
@keyframes doc-hub-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.doc-hub-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.doc-hub-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.doc-hub-modal-close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.doc-hub-modal-close:hover {
  color: var(--color-text);
}
.doc-hub-modal-body {
  padding: 20px;
}
.doc-hub-modal-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 16px 0;
}
.doc-hub-modal-input {
  width: 100%;
  background-color: var(--color-surface-3, #0f172a);
  border: 2px solid var(--color-accent);
  color: var(--color-text);
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.doc-hub-modal-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.doc-hub-modal-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.7;
  line-height: 1.4;
  margin: 0;
}
.doc-hub-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px;
  background-color: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}
.doc-hub-modal-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.doc-hub-modal-btn.cancel {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.doc-hub-modal-btn.cancel:hover {
  background-color: var(--color-surface-3);
  color: var(--color-text);
}
.doc-hub-modal-btn.save {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: none;
}
.doc-hub-modal-btn.save:hover {
  opacity: 0.9;
}
.doc-hub-sandbox-test-box {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: 20px;
  margin-top: 24px;
}
.doc-hub-sandbox-test-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.doc-hub-sandbox-test-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.doc-hub-sandbox-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  flex-grow: 1;
}
.doc-hub-sandbox-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.doc-hub-sandbox-test-input {
  background-color: var(--color-surface-3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.doc-hub-sandbox-test-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.doc-hub-sandbox-test-btn {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  height: 38px;
  transition: opacity 0.2s;
}
.doc-hub-sandbox-test-btn:hover {
  opacity: 0.9;
}
.doc-hub-sandbox-test-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.doc-hub-sandbox-result-box {
  margin-top: 20px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.doc-hub-sandbox-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.doc-hub-sandbox-result-pre {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 16px;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--color-success);
  max-height: 400px;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
}
.doc-hub-theme-switch-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  border-radius: 20px;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}
.doc-hub-theme-switch-container:hover {
  border-color: var(--color-border-accent);
}
.doc-hub-theme-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
  letter-spacing: 0.5px;
}
.doc-hub-theme-label.active {
  color: var(--color-accent);
}
.doc-hub-theme-switch {
  width: 32px;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  position: relative;
  transition: background-color 0.2s ease;
}
[data-theme=light] .doc-hub-theme-switch {
  background-color: rgba(0, 0, 0, 0.15);
}
.doc-hub-theme-switch-handle {
  width: 14px;
  height: 14px;
  background-color: var(--color-text);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-hub-theme-switch.light .doc-hub-theme-switch-handle {
  transform: translateX(14px);
  background-color: var(--color-accent);
}
.doc-hub-subtabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
}
.doc-hub-sim-tab-btn {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--color-text-secondary);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}
.doc-hub-sim-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: var(--color-text);
}
[data-theme=light] .doc-hub-sim-tab-btn {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--color-text-secondary);
}
[data-theme=light] .doc-hub-sim-tab-btn:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: var(--color-text);
}
.doc-hub-sim-tab-btn.active {
  background-color: var(--color-accent-dark, #2DD4A0) !important;
  border-color: var(--color-accent-dark, #2DD4A0) !important;
  color: #0A0A0A !important;
  font-weight: 800;
}
.doc-hub-sim-tab-btn.active:hover {
  background-color: var(--color-accent, #4AFFC5) !important;
  border-color: var(--color-accent, #4AFFC5) !important;
  color: #000000 !important;
}
[data-theme=light] .doc-hub-sim-tab-btn.active {
  background-color: var(--color-accent, #1A6BE8) !important;
  border-color: var(--color-accent, #1A6BE8) !important;
  color: #ffffff !important;
  font-weight: 800;
}
[data-theme=light] .doc-hub-sim-tab-btn.active:hover {
  background-color: var(--color-accent-dark, #1250B0) !important;
  border-color: var(--color-accent-dark, #1250B0) !important;
  color: #ffffff !important;
}
[data-theme=light] .doc-hub-response-pre {
  color: var(--color-accent, #1A6BE8) !important;
}
[data-theme=light] .doc-hub-sandbox-result-pre {
  color: var(--color-accent, #1A6BE8) !important;
}
[data-theme=light] .doc-hub-method.post {
  background-color: var(--color-accent-glow, rgba(26, 107, 232, 0.12)) !important;
  color: var(--color-accent, #1A6BE8) !important;
}

/* src/pages/Public/LPDigitacaoWizard.css */
.lpwiz-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.lpwiz-ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.lpwiz-glow-1 {
  position: absolute;
  top: -128px;
  left: -128px;
  width: 384px;
  height: 384px;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 9999px;
  filter: blur(120px);
}
.lpwiz-glow-2 {
  position: absolute;
  top: 50%;
  right: -128px;
  width: 500px;
  height: 500px;
  background: rgba(13, 148, 136, 0.08);
  border-radius: 9999px;
  filter: blur(140px);
}
.lpwiz-modal {
  background: rgba(19, 27, 38, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 35px -5px rgba(16, 185, 129, 0.12);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lpwiz-header {
  padding: 18px 24px 8px;
  flex-shrink: 0;
}
.lpwiz-step-bars {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}
.lpwiz-step-segment {
  height: 4px;
  flex: 1;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}
.lpwiz-step-segment.active {
  background-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}
.lpwiz-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lpwiz-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lpwiz-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.lpwiz-step-name {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}
.lpwiz-close-btn {
  color: #94a3b8;
  padding: 4px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.lpwiz-close-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}
.lpwiz-body {
  padding: 16px 24px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.lpwiz-footer-badges {
  padding: 12px 24px;
  background-color: rgba(14, 20, 28, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}
.input-field-focus {
  transition: all 0.2s ease;
}
.input-field-focus:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
.btn-gradient {
  background:
    linear-gradient(
      135deg,
      #10b981 0%,
      #059669 100%);
  color: #ffffff;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}
.btn-gradient:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      #34d399 0%,
      #10b981 100%);
  transform: translateY(-1px);
}
.btn-gradient:active:not(:disabled) {
  transform: translateY(0);
}
.shadow-btn-emerald {
  box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.45);
}
.lpwiz-modal svg {
  display: block;
  flex-shrink: 0;
}
.w-10 {
  width: 40px !important;
}
.h-10 {
  height: 40px !important;
}
.w-5 {
  width: 20px !important;
}
.h-5 {
  height: 20px !important;
}
.w-4 {
  width: 16px !important;
}
.h-4 {
  height: 16px !important;
}
.w-3\.5 {
  width: 14px !important;
}
.h-3\.5 {
  height: 14px !important;
}
.shrink-0 {
  flex-shrink: 0;
}
.space-y-1 > * + * {
  margin-top: 4px;
}
.space-y-1\.5 > * + * {
  margin-top: 6px;
}
.space-y-2 > * + * {
  margin-top: 8px;
}
.space-y-2\.5 > * + * {
  margin-top: 10px;
}
.space-y-3 > * + * {
  margin-top: 12px;
}
.space-y-3\.5 > * + * {
  margin-top: 14px;
}
.space-y-4 > * + * {
  margin-top: 16px;
}
.space-y-6 > * + * {
  margin-top: 24px;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.inset-y-0 {
  top: 0;
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.top-0 {
  top: 0;
}
.bottom-0 {
  bottom: 0;
}
.pl-3\.5 {
  padding-left: 14px !important;
}
.pl-10 {
  padding-left: 40px !important;
}
.pl-11 {
  padding-left: 44px !important;
}
.pr-4 {
  padding-right: 16px !important;
}
.pr-9 {
  padding-right: 36px !important;
}
.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.py-2\.5 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.py-3\.5 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.px-3\.5 {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.p-3\.5 {
  padding: 14px !important;
}
.p-4 {
  padding: 16px !important;
}
.p-5 {
  padding: 20px !important;
}
.rounded-lg {
  border-radius: 8px;
}
.rounded-xl {
  border-radius: 12px;
}
.rounded-2xl {
  border-radius: 16px;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
  border-style: solid;
}
.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.border-white\/5 {
  border-color: rgba(255, 255, 255, 0.05) !important;
}
.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}
.border-\[\#233244\] {
  border-color: #233244 !important;
}
.border-\[\#1e2f42\] {
  border-color: #1e2f42 !important;
}
.border-slate-700\/40 {
  border-color: rgba(51, 65, 85, 0.4) !important;
}
.border-slate-700\/50 {
  border-color: rgba(51, 65, 85, 0.5) !important;
}
.border-slate-700\/60 {
  border-color: rgba(51, 65, 85, 0.6) !important;
}
.bg-\[\#0e141c\] {
  background-color: #0e141c !important;
}
.bg-\[\#0e141c\]\/80 {
  background-color: rgba(14, 20, 28, 0.8) !important;
}
.bg-\[\#0e141c\]\/60 {
  background-color: rgba(14, 20, 28, 0.6) !important;
}
.bg-\[\#121c26\] {
  background-color: #121c26 !important;
}
.bg-\[\#141d27\] {
  background-color: #141d27 !important;
}
.bg-\[\#16202c\] {
  background-color: #16202c !important;
}
.bg-emerald-500\/10 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}
.bg-emerald-500\/15 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
.bg-emerald-500\/20 {
  background-color: rgba(16, 185, 129, 0.2) !important;
}
.bg-emerald-500\/5 {
  background-color: rgba(16, 185, 129, 0.05) !important;
}
.bg-emerald-950\/70 {
  background-color: rgba(6, 78, 59, 0.7) !important;
}
.bg-emerald-950\/80 {
  background-color: rgba(6, 78, 59, 0.8) !important;
}
.bg-slate-900\/70 {
  background-color: rgba(15, 23, 42, 0.7) !important;
}
.bg-slate-800\/80 {
  background-color: rgba(30, 41, 59, 0.8) !important;
}
.border-emerald-500\/20 {
  border-color: rgba(16, 185, 129, 0.2) !important;
}
.border-emerald-500\/25 {
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.border-emerald-500\/30 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.border-emerald-500\/40 {
  border-color: rgba(16, 185, 129, 0.4) !important;
}
.border-emerald-800 {
  border-color: #065f46 !important;
}
.text-emerald-300 {
  color: #6ee7b7 !important;
}
.text-emerald-400 {
  color: #34d399 !important;
}
.text-emerald-500 {
  color: #10b981 !important;
}
.text-slate-100 {
  color: #f1f5f9 !important;
}
.text-slate-200 {
  color: #e2e8f0 !important;
}
.text-slate-300 {
  color: #cbd5e1 !important;
}
.text-slate-400 {
  color: #94a3b8 !important;
}
.text-slate-500 {
  color: #64748b !important;
}
.text-white {
  color: #ffffff !important;
}
.w-full {
  width: 100% !important;
  box-sizing: border-box;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.text-center {
  text-align: center;
}
.pointer-events-none {
  pointer-events: none;
}
.bg-transparent {
  background-color: transparent !important;
}
.focus\:outline-none:focus {
  outline: none !important;
}
.text-xs {
  font-size: 12px !important;
}
.text-sm {
  font-size: 14px !important;
}
.text-base {
  font-size: 15px !important;
}
.text-xl {
  font-size: 20px !important;
}
.text-2xl {
  font-size: 24px !important;
}
.text-3xl {
  font-size: 30px !important;
}
.text-4xl {
  font-size: 36px !important;
}
.font-mono {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-extrabold {
  font-weight: 800 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.uppercase {
  text-transform: uppercase;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-tight {
  letter-spacing: -0.02em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.gap-1 {
  gap: 4px;
}
.gap-1\.5 {
  gap: 6px;
}
.gap-2 {
  gap: 8px;
}
.gap-2\.5 {
  gap: 10px;
}
.gap-3 {
  gap: 12px;
}
.gap-3\.5 {
  gap: 14px;
}
.gap-4 {
  gap: 16px;
}
.gap-x-4 {
  column-gap: 16px;
}
.gap-y-1 {
  row-gap: 4px;
}
.p-3 {
  padding: 12px !important;
}
.cursor-pointer {
  cursor: pointer;
}
.font-display {
  font-family: "Hanken Grotesk", sans-serif;
}
.block {
  display: block;
}
.leading-tight {
  line-height: 1.25;
}
.leading-relaxed {
  line-height: 1.625;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid {
  display: grid;
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
@media (min-width: 640px) {
  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }
}
@keyframes sweepGlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.lpwiz-loader-ring {
  transform-origin: center;
  animation: sweepGlow 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.03);
  }
}
.ambient-glow {
  animation: pulseGlow 5s infinite ease-in-out;
}
.shadow-glow-subtle {
  box-shadow: 0 0 25px 0 rgba(16, 185, 129, 0.15);
}
.shadow-glow-emerald {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.35);
}
.shadow-emerald-btn {
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.35);
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.animate-ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.text-transparent {
  color: transparent !important;
}
.bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.bg-gradient-to-r {
  background-image:
    linear-gradient(
      to right,
      #34d399,
      #5eead4,
      #6ee7b7) !important;
}
.bg-gradient-to-b {
  background-image:
    linear-gradient(
      to bottom,
      #16202c,
      #0d141d) !important;
}
.bg-gradient-to-br {
  background-image:
    linear-gradient(
      to bottom right,
      #122324,
      #101b26) !important;
}
.lpwiz-modal select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.25rem !important;
  appearance: none;
  -webkit-appearance: none;
}
.lpwiz-enrich-banner {
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lpwiz-enrich-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #00e676;
  font-weight: 700;
  font-size: 12px;
}
.lpwiz-enrich-grid {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.35;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
.lpwiz-enrich-edit-btn {
  background: none;
  border: none;
  padding: 0;
  color: #38bdf8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  margin-top: 2px;
}
.lpwiz-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpwiz-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.lpwiz-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
}
.lpwiz-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lpwiz-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f1f5f9;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.lpwiz-input:focus {
  border-color: rgba(0, 230, 118, 0.4);
}
.lpwiz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpwiz-error {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #f87171;
}
.lpwiz-btn-primary {
  background: #00e676;
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.lpwiz-btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}
.lpwiz-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lpwiz-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.lpwiz-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lpwiz-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.lpwiz-actions .lpwiz-btn-ghost {
  flex: 1;
}
.lpwiz-actions .lpwiz-btn-primary {
  flex: 2;
}
.lpwiz-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}
.lpwiz-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 230, 118, 0.15);
  border-top-color: #00e676;
  border-radius: 50%;
  animation: lpwiz-spin 0.7s linear infinite;
}
@keyframes lpwiz-spin {
  to {
    transform: rotate(360deg);
  }
}
.lpwiz-loader p {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  margin: 0;
}
.lpwiz-cliente-card {
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #00e676;
}
.lpwiz-cliente-card--novo {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}
.lpwiz-tabela {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.lpwiz-tabela:hover {
  border-color: rgba(0, 230, 118, 0.3);
  background: rgba(0, 230, 118, 0.05);
}
.lpwiz-tabela--sel {
  border-color: #00e676;
  background: rgba(0, 230, 118, 0.08);
}
.lpwiz-tabela-nome {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.lpwiz-tabela-valor {
  font-size: 22px;
  font-weight: 800;
  color: #00e676;
}
.lpwiz-tabela-det {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.lpwiz-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px;
}
.lpwiz-review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.lpwiz-review-label {
  color: #64748b;
  flex-shrink: 0;
}
.lpwiz-review-value {
  color: #e2e8f0;
  font-weight: 500;
  text-align: right;
}
.lpwiz-success {
  align-items: center;
  text-align: center;
  padding: 20px 0;
}
.lpwiz-success-icon {
  font-size: 56px;
}
.lpwiz-consent-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lpwiz-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.6;
}
.lpwiz-consent-item input[type=checkbox] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: #00e676;
  cursor: pointer;
  margin-top: 2px;
}
.lpwiz-link {
  color: #00e676;
  text-decoration: underline;
  font-weight: 600;
}
.lpwiz-link:hover {
  opacity: 0.8;
}
.lpwiz-consulting-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 230, 118, 0.06);
  border: 1px solid rgba(0, 230, 118, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #4AFFC5;
}
.lpwiz-spinner--sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
  flex-shrink: 0;
}
.lpwiz-error-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpwiz-error-callout {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpwiz-error-callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 700;
}
.lpwiz-error-callout-msg {
  margin: 0;
  font-size: 12.5px;
  color: #fde68a;
  line-height: 1.45;
}
.lpwiz-btn-caixa-action,
.lpwiz-btn-caixa-alert-trigger {
  background:
    linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.2) 0%,
      rgba(217, 119, 6, 0.15) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.lpwiz-btn-caixa-action:hover,
.lpwiz-btn-caixa-alert-trigger:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
  color: #fff;
  transform: translateY(-1px);
}
.lpwiz-btn-retry {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.lpwiz-btn-retry:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.lpwiz-caixa-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  padding: 16px;
  animation: lpwiz-fade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lpwiz-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lpwiz-caixa-modal {
  position: relative;
  background:
    linear-gradient(
      155deg,
      #161c24 0%,
      #0f141b 100%);
  border: 1px solid rgba(78, 222, 163, 0.35);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(78, 222, 163, 0.12) inset,
    0 24px 70px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(78, 222, 163, 0.16);
  width: 100%;
  max-width: 510px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  animation: lpwiz-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lpwiz-pop {
  from {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.lpwiz-caixa-ambient-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 130px;
  background:
    radial-gradient(
      circle,
      rgba(78, 222, 163, 0.22) 0%,
      transparent 70%);
  pointer-events: none;
}
.lpwiz-caixa-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  transition: color 0.15s;
}
.lpwiz-caixa-close:hover {
  color: #f87171;
}
.lpwiz-caixa-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lpwiz-caixa-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(78, 222, 163, 0.14);
  border: 1px solid rgba(78, 222, 163, 0.35);
  color: #4edea3;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lpwiz-caixa-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4edea3;
  box-shadow: 0 0 8px #4edea3;
}
.lpwiz-caixa-content {
  position: relative;
  padding: 20px 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lpwiz-caixa-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(78, 222, 163, 0.2) 0%,
      rgba(78, 222, 163, 0.05) 100%);
  border: 1.5px solid rgba(78, 222, 163, 0.45);
  color: #4edea3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(78, 222, 163, 0.2);
}
.lpwiz-caixa-title {
  font-size: 19px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 14px 0;
  line-height: 1.3;
}
.lpwiz-caixa-message-box {
  width: 100%;
  box-sizing: border-box;
  background:
    linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.16) 0%,
      rgba(26, 32, 40, 0.96) 100%);
  border: 1.5px solid rgba(78, 222, 163, 0.5);
  border-left: 5px solid #4edea3;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  margin-bottom: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 22px rgba(78, 222, 163, 0.14);
}
.lpwiz-caixa-message-icon {
  font-size: 16px;
  line-height: 1;
}
.lpwiz-caixa-message-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.lpwiz-caixa-message-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #4edea3;
  letter-spacing: 0.05em;
}
.lpwiz-caixa-message-body {
  font-size: 16px;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.lpwiz-caixa-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 16px 0;
  text-align: left;
}
.lpwiz-caixa-question-card {
  width: 100%;
  box-sizing: border-box;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 3.5px solid #10b981;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin-bottom: 16px;
}
.lpwiz-caixa-question-icon {
  font-size: 18px;
  margin-top: 1px;
}
.lpwiz-caixa-question-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 2px;
}
.lpwiz-caixa-question-info p {
  margin: 0;
  font-size: 12px;
  color: #a7f3d0;
  line-height: 1.45;
}
.lpwiz-caixa-tutorial {
  width: 100%;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  margin-bottom: 14px;
  animation: lpwiz-fade 0.2s ease;
}
.lpwiz-tutorial-title {
  margin: 0 0 10px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lpwiz-tutorial-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #cbd5e1;
}
.lpwiz-tutorial-steps strong {
  color: #f1f5f9;
}
.lpwiz-caixa-actions {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpwiz-btn-caixa-whatsapp {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #22c55e;
  color: #0b2212;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 13px 18px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
  transition: all 0.15s ease;
}
.lpwiz-btn-caixa-whatsapp:hover {
  background: #16a34a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45);
}
.lpwiz-btn-caixa-tutorial-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lpwiz-btn-caixa-tutorial-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.lpwiz-btn-caixa-retry {
  background:
    linear-gradient(
      135deg,
      rgba(74, 255, 197, 0.15) 0%,
      rgba(74, 255, 197, 0.05) 100%);
  border: 1px solid rgba(74, 255, 197, 0.4);
  color: #4AFFC5;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lpwiz-btn-caixa-retry:hover {
  background: rgba(74, 255, 197, 0.25);
  color: #fff;
  transform: translateY(-1px);
}
.lpwiz-btn-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.lpwiz-btn-row > * {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.lpwiz-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid #233244 !important;
  background: #141d27 !important;
  color: #94a3b8 !important;
  text-align: center !important;
  user-select: none !important;
  box-sizing: border-box !important;
}
.lpwiz-toggle-btn:hover {
  color: #f1f5f9 !important;
  border-color: #3b4c63 !important;
  background: #1a2533 !important;
}
.lpwiz-toggle-btn.active {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.28) !important;
  font-weight: 700 !important;
}
.lpwiz-toggle-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background-color: #475569 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  shrink: 0 !important;
}
.lpwiz-toggle-btn.active .lpwiz-toggle-dot {
  background-color: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}
.clt-modal-wrapper {
  background-color: #161c24 !important;
  color: #dde3ee !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(78, 222, 163, 0.15) !important;
  overflow: hidden !important;
}
.clt-accent-glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      #4edea3,
      transparent) !important;
  opacity: 0.9 !important;
  z-index: 10 !important;
}
.clt-header {
  padding: 16px 24px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.clt-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background-color: #2f353e !important;
  color: #4edea3 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.clt-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  background-color: #1a2028 !important;
  color: #bbcabf !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.clt-close-btn:hover {
  color: #dde3ee !important;
  background-color: #242a33 !important;
}
.clt-steps-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 24px 12px !important;
}
.clt-step-bar {
  height: 4px !important;
  flex: 1 1 0% !important;
  border-radius: 9999px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}
.clt-step-bar.active {
  background-color: #4edea3 !important;
  box-shadow: 0 0 8px rgba(78, 222, 163, 0.7) !important;
}
.clt-title-section {
  padding: 0 24px !important;
  margin-bottom: 8px !important;
}
.clt-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.clt-title-icon-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background-color: #1a2028 !important;
  color: #4edea3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.clt-title-h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #dde3ee !important;
  line-height: 28px !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
}
.clt-title-desc {
  font-size: 13px !important;
  color: #bbcabf !important;
  line-height: 18px !important;
  margin: 4px 0 0 !important;
}
.clt-form {
  padding: 8px 24px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.clt-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.clt-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #bbcabf !important;
}
.clt-label-title {
  color: #dde3ee !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.clt-asterisk {
  color: #4edea3 !important;
}
.clt-label-tag {
  color: #4edea3 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.clt-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.clt-input-icon {
  position: absolute !important;
  left: 14px !important;
  color: #86948a !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
.clt-input {
  width: 100% !important;
  background-color: #1a2028 !important;
  color: #dde3ee !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  padding: 13px 40px 13px 44px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
.clt-input::placeholder {
  color: #86948a !important;
  opacity: 0.6 !important;
}
.clt-input:focus {
  background-color: #20262f !important;
  border-color: #4edea3 !important;
  box-shadow: 0 0 0 1px #4edea3 !important;
}
.clt-check-icon {
  position: absolute !important;
  right: 14px !important;
  color: #4edea3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease !important;
}
.clt-feature-box {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background-color: #1a2028 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.clt-feature-glow {
  position: absolute !important;
  right: -40px !important;
  top: -40px !important;
  width: 110px !important;
  height: 110px !important;
  background-color: rgba(78, 222, 163, 0.1) !important;
  border-radius: 9999px !important;
  filter: blur(28px) !important;
  pointer-events: none !important;
}
.clt-feature-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.clt-feature-bolt-box {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background-color: rgba(78, 222, 163, 0.15) !important;
  color: #4edea3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.clt-feature-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #dde3ee !important;
  letter-spacing: -0.01em !important;
}
.clt-feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.clt-feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #bbcabf !important;
  line-height: 17px !important;
}
.clt-feature-item-icon {
  color: #4edea3 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.clt-cta-btn {
  width: 100% !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  background-color: #4edea3 !important;
  color: #090f16 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 24px rgba(78, 222, 163, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}
.clt-cta-btn:hover:not(:disabled) {
  background-color: #68fcbf !important;
  box-shadow: 0 6px 28px rgba(78, 222, 163, 0.55) !important;
  transform: translateY(-1px) !important;
}
.clt-cta-btn:active:not(:disabled) {
  transform: scale(0.99) !important;
}
.clt-cta-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}
.clt-cta-subtext {
  text-align: center !important;
  font-size: 11px !important;
  color: #86948a !important;
  letter-spacing: 0.02em !important;
  margin-top: 4px !important;
}
.clt-footer {
  margin-top: auto !important;
  padding: 14px 20px !important;
  background-color: #090f16 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 14px !important;
  font-size: 11px !important;
  color: #bbcabf !important;
}
.clt-footer-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.clt-footer-icon {
  color: #4edea3 !important;
  font-size: 15px !important;
}
.clt-footer-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 9999px !important;
  background-color: #3c4a42 !important;
}
.lpwiz-theme-venttu .lpwiz-toggle-btn.active {
  background: rgba(78, 53, 255, 0.22) !important;
  border-color: #f1ff00 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(78, 53, 255, 0.35) !important;
}
.lpwiz-theme-venttu .lpwiz-toggle-btn.active .lpwiz-toggle-dot {
  background-color: #f1ff00 !important;
  box-shadow: 0 0 8px #f1ff00 !important;
}
.lpwiz-theme-venttu .clt-modal-wrapper {
  background-color: #131126 !important;
  color: #f5f4ff !important;
  border: 1px solid rgba(78, 53, 255, 0.35) !important;
  box-shadow: 0 25px 60px -15px rgba(10, 8, 28, 0.85), 0 0 35px -5px rgba(78, 53, 255, 0.3) !important;
}
.lpwiz-theme-venttu .clt-accent-glow {
  height: 3px !important;
  background:
    linear-gradient(
      90deg,
      #4e35ff,
      #f1ff00,
      #4e35ff) !important;
  opacity: 0.95 !important;
}
.lpwiz-theme-venttu .clt-badge {
  background-color: rgba(78, 53, 255, 0.22) !important;
  color: #f1ff00 !important;
  border: 1px solid rgba(241, 255, 0, 0.3) !important;
  font-weight: 700 !important;
}
.lpwiz-theme-venttu .clt-close-btn {
  background-color: #1c1936 !important;
  color: #cbc8e8 !important;
}
.lpwiz-theme-venttu .clt-close-btn:hover {
  color: #ffffff !important;
  background-color: #28234a !important;
}
.lpwiz-theme-venttu .clt-step-bar.active {
  background-color: #f1ff00 !important;
  box-shadow: 0 0 8px rgba(241, 255, 0, 0.7) !important;
}
.lpwiz-theme-venttu .clt-title-icon-box {
  background-color: rgba(78, 53, 255, 0.22) !important;
  color: #f1ff00 !important;
  border: 1px solid rgba(78, 53, 255, 0.4) !important;
}
.lpwiz-theme-venttu .clt-title-h2 {
  font-weight: 700 !important;
  color: #ffffff !important;
}
.lpwiz-theme-venttu .clt-title-desc,
.lpwiz-theme-venttu .clt-label,
.lpwiz-theme-venttu .clt-feature-item,
.lpwiz-theme-venttu .clt-footer {
  color: #cbc8e8 !important;
}
.lpwiz-theme-venttu .clt-label-title,
.lpwiz-theme-venttu .clt-feature-title {
  color: #ffffff !important;
}
.lpwiz-theme-venttu .clt-asterisk,
.lpwiz-theme-venttu .clt-label-tag,
.lpwiz-theme-venttu .clt-check-icon,
.lpwiz-theme-venttu .clt-feature-item-icon,
.lpwiz-theme-venttu .clt-footer-icon {
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .clt-input-icon,
.lpwiz-theme-venttu .clt-cta-subtext {
  color: #9c96c9 !important;
}
.lpwiz-theme-venttu .clt-input {
  background-color: #1c1936 !important;
  color: #ffffff !important;
  border: 1px solid rgba(78, 53, 255, 0.35) !important;
}
.lpwiz-theme-venttu .clt-input:focus {
  background-color: #231f44 !important;
  border-color: #f1ff00 !important;
  box-shadow: 0 0 0 2px rgba(241, 255, 0, 0.25) !important;
}
.lpwiz-theme-venttu .clt-feature-box {
  background-color: #1c1936 !important;
  border: 1px solid rgba(78, 53, 255, 0.3) !important;
}
.lpwiz-theme-venttu .clt-feature-glow {
  background-color: rgba(78, 53, 255, 0.22) !important;
}
.lpwiz-theme-venttu .clt-feature-bolt-box {
  background-color: rgba(241, 255, 0, 0.16) !important;
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .clt-cta-btn {
  background-color: #f1ff00 !important;
  color: #1d1c31 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 24px rgba(241, 255, 0, 0.35) !important;
}
.lpwiz-theme-venttu .clt-cta-btn:hover:not(:disabled) {
  background-color: #e5f200 !important;
  box-shadow: 0 8px 28px rgba(241, 255, 0, 0.5) !important;
}
.lpwiz-theme-venttu .clt-footer {
  background-color: #0d0b1a !important;
  border-top: 1px solid rgba(78, 53, 255, 0.25) !important;
}
.lpwiz-theme-venttu .clt-footer-dot {
  background-color: #4e35ff !important;
}
.lpwiz-theme-venttu .lpwiz-modal {
  background: #131126 !important;
  border-color: rgba(78, 53, 255, 0.4) !important;
  box-shadow: 0 25px 60px -15px rgba(10, 8, 28, 0.85), 0 0 35px -5px rgba(78, 53, 255, 0.28) !important;
}
.lpwiz-theme-venttu .lpwiz-glow-1 {
  background: rgba(78, 53, 255, 0.28) !important;
}
.lpwiz-theme-venttu .lpwiz-glow-2 {
  background: rgba(241, 255, 0, 0.14) !important;
}
.lpwiz-theme-venttu .lpwiz-step-segment.active {
  background-color: #f1ff00 !important;
  box-shadow: 0 0 8px rgba(241, 255, 0, 0.8) !important;
}
.lpwiz-theme-venttu .lpwiz-badge {
  background-color: rgba(78, 53, 255, 0.25) !important;
  color: #f1ff00 !important;
  border-color: rgba(241, 255, 0, 0.35) !important;
}
.lpwiz-theme-venttu .btn-gradient,
.lpwiz-theme-venttu .lpwiz-btn-primary {
  background: #f1ff00 !important;
  color: #1d1c31 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 22px -2px rgba(241, 255, 0, 0.38) !important;
}
.lpwiz-theme-venttu .btn-gradient:hover:not(:disabled),
.lpwiz-theme-venttu .lpwiz-btn-primary:hover:not(:disabled) {
  background: #e5f200 !important;
  color: #1d1c31 !important;
}
.lpwiz-theme-venttu .input-field-focus:focus-within,
.lpwiz-theme-venttu .lpwiz-input:focus {
  border-color: #f1ff00 !important;
  box-shadow: 0 0 0 3px rgba(241, 255, 0, 0.2) !important;
}
.lpwiz-theme-venttu .text-emerald-300,
.lpwiz-theme-venttu .text-emerald-400,
.lpwiz-theme-venttu .text-emerald-500 {
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .bg-emerald-500\/10,
.lpwiz-theme-venttu .bg-emerald-500\/15,
.lpwiz-theme-venttu .bg-emerald-500\/20,
.lpwiz-theme-venttu .bg-emerald-500\/5,
.lpwiz-theme-venttu .bg-emerald-950\/70,
.lpwiz-theme-venttu .bg-emerald-950\/80 {
  background-color: rgba(78, 53, 255, 0.2) !important;
}
.lpwiz-theme-venttu .border-emerald-500\/20,
.lpwiz-theme-venttu .border-emerald-500\/25,
.lpwiz-theme-venttu .border-emerald-500\/30,
.lpwiz-theme-venttu .border-emerald-500\/40,
.lpwiz-theme-venttu .border-emerald-800 {
  border-color: rgba(78, 53, 255, 0.45) !important;
}
.lpwiz-theme-venttu .bg-gradient-to-r {
  background-image:
    linear-gradient(
      to right,
      #f1ff00,
      #ffffff,
      #a78bfa) !important;
}
.lpwiz-theme-venttu .lpwiz-tabela--sel {
  border-color: #f1ff00 !important;
  background: rgba(78, 53, 255, 0.22) !important;
}
.lpwiz-theme-venttu .lpwiz-tabela-valor {
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-spinner {
  border-color: rgba(78, 53, 255, 0.25) !important;
  border-top-color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-footer-badges {
  background-color: #0d0b1a !important;
  border-top-color: rgba(78, 53, 255, 0.25) !important;
  color: #cbc8e8 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-modal {
  background:
    linear-gradient(
      155deg,
      #131126 0%,
      #0d0b1a 100%) !important;
  border: 1px solid rgba(78, 53, 255, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(78, 53, 255, 0.2) inset,
    0 24px 70px rgba(8, 6, 22, 0.9),
    0 0 38px rgba(78, 53, 255, 0.28) !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-ambient-glow {
  background:
    radial-gradient(
      circle,
      rgba(78, 53, 255, 0.32) 0%,
      rgba(241, 255, 0, 0.12) 45%,
      transparent 72%) !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-header {
  border-bottom: 1px solid rgba(78, 53, 255, 0.22) !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-badge {
  background: rgba(78, 53, 255, 0.24) !important;
  border: 1px solid rgba(241, 255, 0, 0.38) !important;
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-badge-dot {
  background: #f1ff00 !important;
  box-shadow: 0 0 8px #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-icon-wrap {
  background:
    linear-gradient(
      135deg,
      rgba(78, 53, 255, 0.28) 0%,
      rgba(241, 255, 0, 0.1) 100%) !important;
  border: 1.5px solid rgba(241, 255, 0, 0.45) !important;
  color: #f1ff00 !important;
  box-shadow: 0 6px 24px rgba(78, 53, 255, 0.3) !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-title {
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-message-box {
  background:
    linear-gradient(
      135deg,
      rgba(78, 53, 255, 0.26) 0%,
      rgba(28, 25, 54, 0.96) 100%) !important;
  border: 1.5px solid rgba(241, 255, 0, 0.55) !important;
  border-left: 5px solid #f1ff00 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(241, 255, 0, 0.14) !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-message-label {
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-message-body {
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-desc {
  color: #cbc8e8 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-desc strong {
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-question-card {
  background: rgba(78, 53, 255, 0.18) !important;
  border: 1px solid rgba(78, 53, 255, 0.42) !important;
  border-left: 4px solid #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-question-info strong {
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-question-info p {
  color: #e2e0f5 !important;
}
.lpwiz-theme-venttu .lpwiz-caixa-tutorial {
  background: #1c1936 !important;
  border: 1px solid rgba(78, 53, 255, 0.35) !important;
}
.lpwiz-theme-venttu .lpwiz-tutorial-title {
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-tutorial-steps {
  color: #cbc8e8 !important;
}
.lpwiz-theme-venttu .lpwiz-tutorial-steps strong {
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-whatsapp {
  background: #f1ff00 !important;
  color: #1d1c31 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 22px rgba(241, 255, 0, 0.35) !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-whatsapp:hover {
  background: #e5f200 !important;
  color: #1d1c31 !important;
  box-shadow: 0 8px 26px rgba(241, 255, 0, 0.48) !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-tutorial-toggle {
  background: #1c1936 !important;
  border: 1px solid rgba(78, 53, 255, 0.38) !important;
  color: #e2e0f5 !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-tutorial-toggle:hover {
  background: #28234a !important;
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-retry {
  background: rgba(78, 53, 255, 0.25) !important;
  border: 1px solid rgba(241, 255, 0, 0.5) !important;
  color: #f1ff00 !important;
  font-weight: 800 !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-retry:hover {
  background: rgba(78, 53, 255, 0.4) !important;
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-action,
.lpwiz-theme-venttu .lpwiz-btn-caixa-alert-trigger {
  background: rgba(78, 53, 255, 0.22) !important;
  border: 1px solid rgba(241, 255, 0, 0.45) !important;
  color: #f1ff00 !important;
}
.lpwiz-theme-venttu .lpwiz-btn-caixa-action:hover,
.lpwiz-theme-venttu .lpwiz-btn-caixa-alert-trigger:hover {
  background: rgba(78, 53, 255, 0.35) !important;
  border-color: #f1ff00 !important;
  color: #ffffff !important;
}
.lpwiz-theme-venttu .lpwiz-btn-retry {
  background: #f1ff00 !important;
  border: none !important;
  color: #1d1c31 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(241, 255, 0, 0.3) !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .bg-\[\#1c1936\] {
  background-color: #1a2028 !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .bg-\[\#131126\] {
  background-color: #0f172a !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .border-\[\#2e2956\],
.lpwiz-overlay:not(.lpwiz-theme-venttu) .border-\[\#4e35ff\]\/30,
.lpwiz-overlay:not(.lpwiz-theme-venttu) .border-\[\#4e35ff\]\/40,
.lpwiz-overlay:not(.lpwiz-theme-venttu) .border-\[\#4e35ff\]\/50 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .text-\[\#cbc8e8\] {
  color: #cbd5e1 !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .text-\[\#9c96c9\] {
  color: #94a3b8 !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .bg-\[\#4e35ff\]\/15,
.lpwiz-overlay:not(.lpwiz-theme-venttu) .bg-\[\#4e35ff\]\/20 {
  background-color: rgba(16, 185, 129, 0.12) !important;
}
.clt-step3-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.clt-step3-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: rgba(78, 53, 255, 0.18);
  border: 1px solid rgba(78, 53, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.clt-emp-card {
  background-color: rgba(24, 21, 46, 0.9);
  border: 1px solid rgba(78, 53, 255, 0.28);
  border-radius: 16px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}
.clt-emp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
}
.clt-emp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #10b981;
  box-shadow: 0 0 6px #10b981;
}
.clt-hero-sim-card {
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(31, 27, 62, 0.92) 0%,
      rgba(19, 17, 38, 0.98) 100%);
  border: 1px solid rgba(99, 77, 255, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.clt-preapproved-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  background-color: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.clt-sim-split-box {
  background-color: rgba(14, 12, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.clt-sim-split-divider {
  border-left: 1px solid rgba(78, 53, 255, 0.28);
  padding-left: 16px;
}
@media (max-width: 380px) {
  .clt-sim-split-box {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .clt-sim-split-divider {
    border-left: none;
    border-top: 1px solid rgba(78, 53, 255, 0.25);
    padding-left: 0;
    padding-top: 12px;
  }
}
.clt-cond-card {
  background-color: rgba(24, 21, 46, 0.9);
  border: 1px solid rgba(78, 53, 255, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
}
.clt-adjust-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 10px;
  background-color: rgba(241, 255, 0, 0.08);
  border: 1px solid rgba(241, 255, 0, 0.45);
  color: #f1ff00;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.clt-adjust-btn:hover {
  background-color: rgba(241, 255, 0, 0.16);
  border-color: #f1ff00;
}
.clt-dark-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  background-color: #131126 !important;
  color: #ffffff !important;
  border: 1px solid rgba(78, 53, 255, 0.5) !important;
  outline: none !important;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .clt-dark-input {
  background-color: #141d27 !important;
  border: 1px solid #233244 !important;
}
.clt-dark-input option {
  background-color: #131126 !important;
  color: #ffffff !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .clt-dark-input option {
  background-color: #141d27 !important;
  color: #ffffff !important;
}
.clt-dark-input::placeholder {
  color: #7e78ab !important;
  opacity: 1;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .clt-dark-input::placeholder {
  color: #64748b !important;
}
.clt-dark-input:focus:not(:disabled) {
  border-color: #f1ff00 !important;
  box-shadow: 0 0 0 2px rgba(241, 255, 0, 0.2) !important;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .clt-dark-input:focus:not(:disabled) {
  border-color: #4edea3 !important;
  box-shadow: 0 0 0 2px rgba(78, 222, 163, 0.2) !important;
}
.clt-dark-input:disabled {
  background-color: rgba(13, 12, 26, 0.55) !important;
  color: rgba(203, 200, 232, 0.45) !important;
  border-color: rgba(46, 41, 86, 0.45) !important;
  cursor: not-allowed !important;
  opacity: 0.65;
}
.clt-currency-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background-color: #131126;
  border: 1px solid rgba(78, 53, 255, 0.55);
  transition: all 0.2s ease;
}
.clt-currency-field:focus-within:not(.is-disabled) {
  border-color: #f1ff00;
  box-shadow: 0 0 0 2px rgba(241, 255, 0, 0.2);
}
.clt-currency-field.is-disabled {
  background-color: rgba(13, 12, 26, 0.55);
  border-color: rgba(46, 41, 86, 0.45);
  opacity: 0.6;
  cursor: not-allowed;
}
.clt-currency-prefix {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
.clt-currency-input {
  width: 100%;
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.clt-currency-input::-webkit-outer-spin-button,
.clt-currency-input::-webkit-inner-spin-button,
.clt-dark-input::-webkit-outer-spin-button,
.clt-dark-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.clt-currency-input:disabled {
  color: rgba(203, 200, 232, 0.5) !important;
  cursor: not-allowed !important;
}
.clt-bank-fields-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 0.6fr;
  gap: 10px;
  align-items: start;
}
@media (max-width: 380px) {
  .clt-bank-fields-grid {
    grid-template-columns: 1fr 1fr;
  }
  .clt-bank-fields-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
.clt-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding-top: 6px;
}
.clt-wizard-btn-back {
  flex: 0 0 34%;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(78, 53, 255, 0.3);
  background-color: #1a1830;
  color: #e2e0f5;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transition: all 0.2s ease;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .clt-wizard-btn-back {
  background-color: #141d27;
  border-color: #233244;
  color: #cbd5e1;
}
.clt-wizard-btn-back:hover {
  background-color: #242042;
  color: #ffffff;
}
.lpwiz-overlay:not(.lpwiz-theme-venttu) .clt-wizard-btn-back:hover {
  background-color: #1e293b;
  color: #ffffff;
}
.clt-wizard-btn-primary {
  flex: 1 1 66%;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  background-color: #4edea3;
  color: #090f16;
  box-shadow: 0 4px 20px rgba(78, 222, 163, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.lpwiz-theme-venttu .clt-wizard-btn-primary {
  background-color: #f1ff00 !important;
  color: #1d1c31 !important;
  box-shadow: 0 6px 22px -2px rgba(241, 255, 0, 0.38) !important;
}
.lpwiz-theme-venttu .clt-wizard-btn-primary:hover:not(:disabled) {
  background-color: #e5f200 !important;
}
.clt-wizard-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 380px) {
  .clt-wizard-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .clt-wizard-btn-back,
  .clt-wizard-btn-primary {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* src/pages/Public/LGPDPage.css */
.lgpd-root {
  min-height: 100vh;
  background: #080d1a;
  font-family: "Inter", sans-serif;
  color: #e2e8f0;
  padding: 0 16px 60px;
}
.lgpd-container {
  max-width: 780px;
  margin: 0 auto;
}
.lgpd-header {
  text-align: center;
  padding: 60px 0 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 40px;
}
.lgpd-badge {
  display: inline-block;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
.lgpd-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 12px;
  line-height: 1.2;
}
.lgpd-subtitle {
  font-size: 15px;
  color: #94a3b8;
  margin: 0 0 8px;
}
.lgpd-updated {
  font-size: 12px;
  color: #475569;
  margin: 0;
}
.lgpd-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 40px;
}
.lgpd-summary-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 12px;
}
.lgpd-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
}
.lgpd-nav-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
.lgpd-nav-link:hover {
  color: #4AFFC5;
}
.lgpd-section {
  margin-bottom: 48px;
  scroll-margin-top: 24px;
}
.lgpd-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lgpd-section p {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 12px;
}
.lgpd-highlight {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13px;
  color: #fbbf24;
  line-height: 1.6;
  margin-top: 12px;
}
.lgpd-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lgpd-list li {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.7;
}
.lgpd-list li strong {
  color: #e2e8f0;
}
.lgpd-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}
.lgpd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lgpd-table th {
  background: rgba(74, 255, 197, 0.06);
  color: #4AFFC5;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(74, 255, 197, 0.15);
}
.lgpd-table td {
  padding: 10px 14px;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  line-height: 1.6;
}
.lgpd-table td strong {
  color: #e2e8f0;
}
.lgpd-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.lgpd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.lgpd-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px;
}
.lgpd-card-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.lgpd-card strong {
  color: #e2e8f0;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}
.lgpd-card p {
  color: #64748b;
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
}
.lgpd-rights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.lgpd-right-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 12px;
}
.lgpd-right-item strong {
  color: #e2e8f0;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}
.lgpd-right-item p {
  color: #64748b;
  font-size: 12px;
  margin: 0;
}
.lgpd-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.lgpd-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px;
}
.lgpd-contact-item strong {
  color: #e2e8f0;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}
.lgpd-contact-item p {
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}
.lgpd-footer {
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #475569;
  font-size: 13px;
}

/* src/pages/Admin/AdminNormalizador.css */
.norm-page {
  padding: 0;
  animation: fadeInNorm 0.2s ease;
}
@keyframes fadeInNorm {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.norm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.norm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 6px;
}
.norm-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 560px;
  line-height: 1.55;
}
.norm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.norm-btn--primary {
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-accent-dark));
  color: #000;
  border: none;
}
.norm-btn--primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.norm-btn--ghost {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.norm-btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.norm-btn--danger {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}
.norm-btn--danger:hover:not(:disabled) {
  opacity: 0.85;
}
.norm-btn--sm {
  padding: 5px 12px;
  font-size: 12px;
}
.norm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.norm-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.norm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.norm-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.norm-table td {
  padding: 12px 16px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.norm-table tr:last-child td {
  border-bottom: none;
}
.norm-table tr:hover td {
  background: var(--color-surface-2);
}
.norm-table tr.norm-row-detail:hover td {
  background: transparent;
}
.norm-row--inactive td {
  opacity: 0.45;
}
.norm-row--expanded td {
  background: var(--color-surface-2);
  border-bottom: none;
}
.norm-cell--order {
  width: 60px;
  text-align: center;
  color: var(--color-text-secondary);
}
.norm-cell--pattern {
  max-width: 220px;
}
.norm-pattern-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.norm-pattern-code {
  font-family:
    "JetBrains Mono",
    "Fira Mono",
    monospace;
  font-size: 12px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  display: block;
}
.norm-row-detail td {
  padding: 0 !important;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.norm-detail-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding: 16px 20px 18px 28px;
  animation: expandDetail 0.18s ease;
  border-left: 3px solid var(--color-accent);
}
@keyframes expandDetail {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.norm-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  max-width: 320px;
}
.norm-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.norm-detail-code {
  font-family:
    "JetBrains Mono",
    "Fira Mono",
    monospace;
  font-size: 12px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--color-text);
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
}
.norm-detail-value {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
}
.norm-cell--msg {
  max-width: 200px;
}
.norm-msg-preview {
  display: flex;
  align-items: center;
}
.norm-msg-text {
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 180px;
}
.norm-cell--actions {
  text-align: right;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.norm-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.norm-badge--block {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}
.norm-badge--pass {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.norm-badge-fonte {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(167, 139, 250, 0.15);
  color: #7C3AED;
  border: 1px solid rgba(167, 139, 250, 0.4);
}
[data-theme=light] .norm-badge-fonte {
  background: rgba(124, 58, 237, 0.10);
  color: #6D28D9;
  border-color: rgba(124, 58, 237, 0.3);
}
.norm-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.norm-badge-tag--block {
  border-color: var(--color-error);
  color: var(--color-error);
  background: var(--color-error-bg);
}
.norm-badge-tag--warn {
  border-color: var(--color-warning);
  color: var(--color-warning);
  background: var(--color-warning-bg);
}
.norm-badge-tag--empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  letter-spacing: 0;
}
.norm-toggle {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.norm-toggle--on {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}
.norm-toggle--off {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.norm-toggle--on:hover {
  opacity: 0.85;
}
.norm-toggle--off:hover {
  background: var(--color-surface-3);
}
.norm-empty {
  padding: 48px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}
.norm-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.norm-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-accent-glow);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spinNorm 0.8s linear infinite;
}
@keyframes spinNorm {
  to {
    transform: rotate(360deg);
  }
}
.norm-error-box {
  padding: 16px 20px;
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: 10px;
  color: var(--color-error);
  font-size: 13px;
  display: flex;
  align-items: center;
}
.norm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInNorm 0.15s ease;
}
.norm-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.norm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.norm-modal-close {
  background: var(--color-surface-2);
  border: none;
  border-radius: 6px;
  color: var(--color-text-secondary);
  width: 28px;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.norm-modal-close:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.norm-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 65vh;
  overflow-y: auto;
}
.norm-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.norm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.norm-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.norm-field--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}
.norm-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.norm-field-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  display: block;
  margin-bottom: 2px;
}
.norm-required {
  color: var(--color-error);
}
.norm-input,
.norm-select,
.norm-textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 10px 14px;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.norm-input:focus,
.norm-select:focus,
.norm-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.norm-input--sm {
  width: 90px;
}
.norm-textarea {
  resize: vertical;
  min-height: 56px;
}
.norm-select {
  cursor: pointer;
}
.norm-select option {
  background: var(--color-surface);
  color: var(--color-text);
}
.norm-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.norm-toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
  flex-shrink: 0;
  margin-top: 1px;
}
.norm-toggle-switch.on {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
}
.norm-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform 0.25s, background 0.25s;
}
.norm-toggle-switch.on .norm-toggle-thumb {
  transform: translateX(18px);
  background: var(--color-accent);
}

/* src/pages/Admin/AdminSettings.css */
.admin-settings {
  padding: 32px;
  width: 100%;
}
.settings-header {
  margin-bottom: 28px;
}
.settings-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}
.settings-header p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}
.settings-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.settings-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.settings-tab:hover {
  border-color: var(--tab-color, var(--color-accent));
  color: var(--tab-color, var(--color-accent));
  background: var(--color-surface-3);
}
.settings-tab.active {
  border-color: var(--tab-color, var(--color-accent));
  background: var(--color-surface-3);
  color: var(--tab-color, var(--color-accent));
  box-shadow: 0 0 0 1px var(--tab-color, var(--color-accent)) inset;
}
[data-theme=light] .settings-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface-3);
}
[data-theme=light] .settings-tab.active {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
  color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}
.settings-tab-emoji {
  font-size: 16px;
}
.settings-product-panel {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.settings-product-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px 24px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--accent, var(--color-accent));
  border-radius: 12px;
}
.settings-product-emoji {
  font-size: 32px;
  line-height: 1;
}
.settings-product-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3px;
}
.settings-product-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.settings-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  border-top: 2px solid var(--accent, var(--color-accent));
}
[data-theme=light] .settings-group {
  border-top-color: var(--color-accent);
}
.settings-group-title {
  padding: 14px 20px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, var(--color-accent));
  letter-spacing: 0.03em;
}
[data-theme=light] .settings-group-title {
  color: var(--color-accent);
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.settings-item:last-child {
  border-bottom: none;
}
.settings-item-info {
  flex: 1;
  min-width: 220px;
}
.settings-item-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.settings-item-desc {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.settings-item-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}
.settings-slider {
  width: 100%;
  accent-color: var(--accent, var(--color-accent));
  cursor: pointer;
}
[data-theme=light] .settings-slider {
  accent-color: var(--color-accent);
}
.settings-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-number-input {
  width: 72px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--color-text);
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
.settings-number-input:focus {
  border-color: var(--accent, var(--color-accent));
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}
[data-theme=light] .settings-number-input:focus {
  border-color: var(--color-accent);
}
.settings-unit {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 600;
  width: 20px;
}
.settings-save-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent, var(--color-accent));
  background:
    linear-gradient(
      135deg,
      var(--accent, var(--color-accent)),
      color-mix(in srgb, var(--accent, var(--color-accent)) 70%, #000));
  color: #000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 72px;
}
[data-theme=light] .settings-save-btn {
  border-color: var(--color-accent);
  color: #000;
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-accent-dark));
}
.settings-save-btn:hover:not(:disabled) {
  opacity: 0.85;
  background: var(--color-surface-3);
}
.settings-save-btn.saved {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}
.settings-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-save-all-row {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}
.settings-save-all-btn {
  padding: 9px 22px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-accent-dark));
  color: #000;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.settings-save-all-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.settings-preview {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px 24px;
}
.settings-preview-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.settings-preview-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.settings-preview-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-preview-label {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.settings-preview-value {
  font-size: 20px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  color: var(--accent, var(--color-accent));
}
[data-theme=light] .settings-preview-value {
  color: var(--color-accent);
}
.settings-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.settings-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-accent-glow);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.settings-error-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: 12px;
  color: var(--color-error);
}
.settings-error-box svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.settings-error-box strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.settings-error-box p {
  font-size: 13px;
  margin: 0 0 10px;
  opacity: 0.8;
}
.settings-retry-btn {
  padding: 6px 16px;
  border-radius: 7px;
  border: 1px solid var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-retry-btn:hover {
  opacity: 0.85;
}
.mkt-integrations {
  animation: fadeIn 0.2s ease;
}
.mkt-integrations-header {
  margin-bottom: 28px;
}
.mkt-integrations-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}
.mkt-integrations-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 680px;
}
.mkt-platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 24px;
}
.mkt-platform-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--pcolor, var(--color-accent));
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow 0.2s;
}
.mkt-platform-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.mkt-platform-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.mkt-platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.mkt-platform-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.mkt-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.mkt-platform-badge.configured {
  background: rgba(74, 255, 197, 0.12);
  color: #4AFFC5;
  border: 1px solid rgba(74, 255, 197, 0.3);
}
.mkt-platform-badge.unconfigured {
  background: rgba(251, 191, 36, 0.12);
  color: #FBBF24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.mkt-platform-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.mkt-cred-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mkt-cred-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
}
.mkt-cred-input-wrap {
  position: relative;
}
.mkt-cred-input {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 40px 9px 12px;
  color: var(--color-text);
  font-size: 13px;
  font-family:
    "JetBrains Mono",
    "Courier New",
    monospace;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.mkt-cred-input:focus {
  border-color: var(--pcolor, var(--color-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcolor, var(--color-accent)) 15%, transparent);
}
.mkt-cred-input::placeholder {
  color: var(--color-text-muted, var(--color-text-secondary));
  opacity: 0.6;
  font-size: 11px;
}
.mkt-cred-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.mkt-cred-eye:hover {
  opacity: 1;
}
.mkt-cred-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.7;
  line-height: 1.4;
}
.mkt-cred-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 12px;
}
.mkt-save-btn {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      var(--pcolor, var(--color-accent)),
      color-mix(in srgb, var(--pcolor, var(--color-accent)) 65%, #000 35%));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.mkt-save-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.mkt-save-btn.saved {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00BFA5);
  color: #000;
}
.mkt-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.mkt-security-note {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin: 0;
  opacity: 0.7;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 520px) {
  .mkt-platforms-grid {
    grid-template-columns: 1fr;
  }
}
.ut-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.2s ease;
}
.ut-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ut-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}
.ut-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 680px;
}
.ut-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.ut-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 16px;
  text-align: center;
}
.ut-empty-icon {
  font-size: 40px;
}
.ut-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
.ut-empty-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}
.ut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.ut-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  display: flex;
  align-items: stretch;
}
.ut-card:hover {
  border-color: var(--tcolor, var(--color-accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.ut-card-accent {
  width: 4px;
  background: var(--tcolor, var(--color-accent));
  flex-shrink: 0;
}
.ut-card-body {
  flex: 1;
  padding: 14px 14px 14px 12px;
  min-width: 0;
}
.ut-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ut-card-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ut-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ut-card-slug {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 4px;
}
.ut-card-count {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.ut-card-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px 8px 4px;
  flex-shrink: 0;
}
.ut-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.15s;
  line-height: 1;
}
.ut-edit-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.ut-del-btn:hover {
  background: rgba(239, 68, 68, 0.15);
}
.ut-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ut-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ut-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.ut-input {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--color-text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.ut-input:focus {
  border-color: #F472B6;
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.15);
}
.ut-slug-input {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.ut-icon-input {
  font-size: 20px;
  max-width: 120px;
}
.ut-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.7;
  line-height: 1.4;
}
.ut-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ut-color-picker {
  width: 40px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-2);
  cursor: pointer;
  flex-shrink: 0;
}
.ut-color-text {
  width: 100px;
  font-family: "JetBrains Mono", monospace;
}
.ut-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ut-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ut-palette-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.ut-palette-swatch:hover {
  transform: scale(1.15);
}
.ut-palette-swatch.selected {
  border-color: var(--color-text);
  transform: scale(1.12);
}
@media (max-width: 640px) {
  .ut-header {
    flex-direction: column;
  }
  .ut-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .ut-grid {
    grid-template-columns: 1fr;
  }
}
.ut-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: flex-start;
}
.ut-role-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ut-role-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.ut-role-tab:hover {
  border-color: var(--rcolor, var(--color-accent));
  color: var(--rcolor, var(--color-accent));
}
.ut-role-tab.active {
  border-color: var(--rcolor, var(--color-accent));
  background: var(--color-surface-3);
  color: var(--rcolor, var(--color-accent));
  box-shadow: 0 0 0 1px var(--rcolor, var(--color-accent)) inset;
}
.ut-role-tab-emoji {
  font-size: 16px;
}
.ut-role-tab-label {
  flex: 1;
}
.ut-role-tab-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.ut-role-desc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--rcolor, var(--color-accent));
  border-radius: 10px;
}
.ut-role-desc-emoji {
  font-size: 22px;
  flex-shrink: 0;
}
.ut-role-desc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.ut-role-desc-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.ut-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ut-role-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ut-role-option {
  flex: 1;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.ut-role-option:hover {
  border-color: var(--rcolor, var(--color-accent));
  background: rgba(255, 255, 255, 0.04);
}
.ut-role-option.selected {
  border-color: var(--rcolor, var(--color-accent));
  background: color-mix(in srgb, var(--rcolor, var(--color-accent)) 12%, transparent);
  color: var(--rcolor, var(--color-accent));
  font-weight: 700;
}
.ut-role-option-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* src/pages/Admin/AdminConsultaLogs.css */
@keyframes aclFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes aclSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes aclSpin {
  to {
    transform: rotate(360deg);
  }
}
.acl-page {
  animation: aclFadeIn .3s ease;
}
.acl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.acl-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #e2e8f0);
  margin: 0 0 4px;
}
.acl-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}
.acl-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.acl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.acl-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 18px;
}
.acl-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.acl-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
}
.acl-stat-value.green {
  color: var(--color-success);
}
.acl-stat-value.red {
  color: var(--color-error);
}
.acl-stat-value.blue {
  color: var(--color-info);
}
.acl-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.acl-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  transition: all .2s;
  margin-bottom: -1px;
}
.acl-tab:hover {
  color: var(--color-text);
}
.acl-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.acl-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
}
.acl-input,
.acl-select {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.acl-input:focus,
.acl-select:focus {
  border-color: var(--color-accent);
}
.acl-input {
  flex: 1;
  min-width: 140px;
}
.acl-input::placeholder {
  color: var(--color-text-secondary);
}
.acl-select {
  cursor: pointer;
}
.acl-select option {
  background: var(--color-surface);
  color: var(--color-text);
}
.acl-input-date {
  min-width: 130px;
  color-scheme: light dark;
}
.acl-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.acl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.acl-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.acl-table td {
  padding: 12px 14px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.acl-table tr:last-child td {
  border-bottom: none;
}
.acl-table tr.expandable {
  cursor: pointer;
  transition: background .15s;
}
.acl-table tr.expandable:hover td {
  background: var(--color-surface-2);
}
.acl-table tr.expandable.expanded td {
  background: var(--color-surface-2);
}
.acl-table tr.expandable.reprovado td {
  background: rgba(255, 59, 48, 0.04);
  border-bottom-color: rgba(255, 59, 48, 0.12);
}
.acl-table tr.expandable.reprovado td:first-child {
  border-left: 3px solid var(--color-error);
}
.acl-table tr.expandable.reprovado:hover td {
  background: rgba(255, 59, 48, 0.08);
}
.acl-stat--reprovado {
  border-color: rgba(255, 59, 48, 0.3) !important;
  transition:
    border-color .2s,
    background .2s,
    transform .1s;
}
.acl-stat--reprovado:hover {
  border-color: var(--color-error) !important;
  background: rgba(255, 59, 48, 0.07) !important;
  transform: translateY(-1px);
}
.acl-cpf {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.acl-nome {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.acl-cell-mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.acl-cell-secondary {
  color: var(--color-text-secondary);
}
.acl-cell-nowrap {
  white-space: nowrap;
}
.acl-cell-money {
  font-size: 12px;
  color: var(--color-success);
}
[data-theme=light] .acl-cell-money {
  color: var(--color-accent);
}
.acl-calls-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.acl-operator-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}
.acl-operator-login {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.acl-cell-expand-arrow {
  text-align: center;
}
.acl-chevron {
  display: inline-block;
  font-size: 18px;
  color: var(--color-text-secondary);
  transition: transform .2s ease;
  line-height: 1;
}
.acl-chevron.open {
  transform: rotate(90deg);
  color: var(--color-accent);
}
.acl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.acl-badge--sm {
  padding: 2px 7px;
  font-size: 10px;
}
.acl-badge--disponivel {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}
.acl-badge--erro {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.acl-badge--timeout {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.acl-badge--pendente {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info);
}
.acl-badge--default {
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.acl-tipo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.acl-tipo--CONSULTA_CLIENTE {
  background: rgba(167, 139, 250, .15);
  color: #a78bfa;
}
.acl-tipo--SOLICITAR_SALDO {
  background: var(--color-info-bg);
  color: var(--color-info);
}
.acl-tipo--SIMULAR {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.acl-tipo--INCLUIR_PROPOSTA {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
[data-theme=light] .acl-tipo--CONSULTA_CLIENTE {
  background: rgba(124, 58, 237, .1);
  color: #6d28d9;
}
.acl-expand-row td {
  padding: 0;
  border-bottom: 2px solid var(--color-accent);
}
.acl-session-detail {
  padding: 20px 24px;
  background: var(--color-surface);
  animation: aclSlideIn .2s ease;
}
.acl-session-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.acl-session-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: 3px 8px;
  border-radius: 4px;
}
.acl-sublogs {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.acl-sublog {
  display: flex;
  gap: 0;
  position: relative;
}
.acl-sublog-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  flex-shrink: 0;
  position: relative;
}
.acl-sublog-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: var(--color-border);
  transform: translateX(-50%);
  z-index: 0;
}
.acl-sublog-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent-glow);
  border: 2px solid var(--color-accent);
  flex-shrink: 0;
  z-index: 1;
  margin-top: 14px;
}
.acl-sublog-dot[data-tipo=CONSULTA_CLIENTE] {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, .2);
}
.acl-sublog-dot[data-tipo=SOLICITAR_SALDO] {
  border-color: var(--color-info);
  background: var(--color-info-bg);
}
.acl-sublog-dot[data-tipo=SIMULAR] {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}
.acl-sublog-dot[data-tipo=INCLUIR_PROPOSTA] {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}
.acl-sublog-dot[data-tipo=SOLICITAR_AUTORIZACAO_CLT] {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .18);
}
.acl-sublog-dot[data-tipo=CONSULTAR_MATRICULAS_CLT] {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, .18);
}
.acl-sublog-dot[data-tipo=INICIAR_JORNADA_NORDEN] {
  border-color: #ec4899;
  background: rgba(236, 72, 153, .18);
}
.acl-tipo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .03em;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.acl-tipo--CONSULTA_CLIENTE {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, .3);
  background: rgba(167, 139, 250, .1);
}
.acl-tipo--SOLICITAR_SALDO {
  color: var(--color-info);
  border-color: rgba(59, 130, 246, .3);
  background: rgba(59, 130, 246, .1);
}
.acl-tipo--SIMULAR {
  color: var(--color-success);
  border-color: rgba(74, 255, 197, .3);
  background: rgba(74, 255, 197, .08);
}
.acl-tipo--INCLUIR_PROPOSTA {
  color: var(--color-warning);
  border-color: rgba(245, 158, 11, .3);
  background: rgba(245, 158, 11, .08);
}
.acl-tipo--SOLICITAR_AUTORIZACAO_CLT {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .1);
}
.acl-tipo--CONSULTAR_MATRICULAS_CLT {
  color: #06b6d4;
  border-color: rgba(6, 182, 212, .35);
  background: rgba(6, 182, 212, .1);
}
.acl-tipo--INICIAR_JORNADA_NORDEN {
  color: #ec4899;
  border-color: rgba(236, 72, 153, .35);
  background: rgba(236, 72, 153, .1);
}
.acl-sublog-content {
  flex: 1;
  padding: 10px 0 18px 12px;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}
.acl-sublog:last-child .acl-sublog-content {
  border-bottom: none;
}
.acl-sublog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.acl-sublog-table {
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: 2px 7px;
  border-radius: 4px;
}
.acl-sublog-fonte {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: "JetBrains Mono", monospace;
}
.acl-sublog-money {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success);
  font-family: "JetBrains Mono", monospace;
}
.acl-sublog-time {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: "JetBrains Mono", monospace;
  margin-left: auto;
}
.acl-sublog-msg {
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-warning);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}
.acl-sublog-jsons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acl-jv-empty {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.acl-jv-empty span {
  font-style: italic;
}
.acl-jv {
}
.acl-jv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-family: inherit;
  transition: color .15s;
}
.acl-jv-toggle:hover {
  color: var(--color-accent);
}
.acl-jv-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform .15s ease;
}
.acl-jv-arrow.open {
  transform: rotate(90deg);
}
.acl-jv-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.acl-jv-hint {
  font-size: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--color-text-secondary);
}
.acl-jv-box {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  animation: aclSlideIn .15s ease;
}
.acl-jv-pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
}
.acl-jv-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.acl-jv-copy:hover {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
}
.acl-empty {
  padding: 48px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}
.acl-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.acl-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-accent-glow);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: aclSpin .8s linear infinite;
}
.acl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.acl-page-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.acl-page-btn:hover:not(:disabled) {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.acl-page-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.acl-cold-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.acl-purge-msg {
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: var(--color-success);
  font-size: 13px;
  margin-bottom: 16px;
}
.acl-restored-title {
  margin: 0;
  font-size: 15px;
  color: var(--color-text);
}
.acl-archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acl-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.acl-archive-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.acl-archive-size {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: "JetBrains Mono", monospace;
}
.acl-archive-actions {
  display: flex;
  gap: 8px;
}
.acl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.acl-btn--primary {
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-accent-dark));
  color: #fff;
  border: none;
}
.acl-btn--primary:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-1px);
}
.acl-btn--ghost {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.acl-btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.acl-btn--danger {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}
.acl-btn--danger:hover:not(:disabled) {
  opacity: .85;
}
.acl-btn--sm {
  padding: 5px 11px;
  font-size: 12px;
}
.acl-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .acl-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .acl-sublog-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .acl-sublog-time {
    margin-left: 0;
  }
}

/* src/pages/Admin/AdminMaintenance.css */
.mnt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.mnt-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mnt-header {
  margin-bottom: 4px;
}
.mnt-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}
.mnt-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.mnt-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid;
  transition: all 0.3s;
  flex-wrap: wrap;
}
.mnt-status--active {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}
.mnt-status--inactive {
  background: rgba(74, 255, 197, 0.05);
  border-color: rgba(74, 255, 197, 0.15);
}
.mnt-status-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mnt-status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-active {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  animation: mnt-pulse 1.5s ease-in-out infinite;
}
.dot-inactive {
  background: #4affc5;
  box-shadow: 0 0 8px rgba(74, 255, 197, 0.4);
}
@keyframes mnt-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}
.mnt-status-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.mnt-status-since {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.mnt-status-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mnt-active-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 80px;
}
.mnt-active-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.mnt-active-lbl {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.mnt-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  white-space: nowrap;
}
.mnt-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mnt-btn--enable {
  background: #EF4444;
  color: #fff;
}
.mnt-btn--enable:hover:not(:disabled) {
  background: #DC2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.mnt-btn--disable {
  background: #4affc5;
  color: #0a0f1e;
}
.mnt-btn--disable:hover:not(:disabled) {
  background: #6fffd3;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 255, 197, 0.3);
}
.mnt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .mnt-grid {
    grid-template-columns: 1fr;
  }
}
.mnt-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mnt-panel--wide {
  grid-column: 1 / -1;
}
.mnt-panel-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mnt-panel-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: -8px 0 0;
  line-height: 1.6;
}
.mnt-count-badge {
  background: rgba(74, 255, 197, 0.15);
  color: var(--color-accent);
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.mnt-refresh-hint {
  font-size: 10px;
  color: var(--color-text-secondary);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.mnt-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mnt-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.mnt-input,
.mnt-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.18s;
  box-sizing: border-box;
}
.mnt-input:focus,
.mnt-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 255, 197, 0.1);
}
.mnt-textarea {
  resize: vertical;
  min-height: 72px;
}
.mnt-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  line-height: 1.6;
}
.mnt-hint--info {
  border-left: 2px solid rgba(74, 255, 197, 0.4);
}
.mnt-search-results {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.mnt-search-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}
.mnt-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}
.mnt-search-row:last-child {
  border-bottom: none;
}
.mnt-search-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mnt-search-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mnt-search-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.mnt-search-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-style: italic;
}
.mnt-search-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.mnt-add-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  border: 1px solid rgba(74, 255, 197, 0.3);
  background: rgba(74, 255, 197, 0.08);
  color: var(--color-accent);
  white-space: nowrap;
}
.mnt-add-btn:hover:not(.added):not(:disabled) {
  background: rgba(74, 255, 197, 0.15);
}
.mnt-add-btn.added,
.mnt-add-btn:disabled {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  cursor: default;
}
.mnt-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
  font-family: monospace;
}
.mnt-tag--role.mnt-tag--admin,
.mnt-tag--role.mnt-tag--superadmin {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
.mnt-tag--role.mnt-tag--partner {
  background: rgba(74, 255, 197, 0.1);
  color: var(--color-accent);
}
.mnt-whitelist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mnt-whitelist-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 14px;
  background: rgba(74, 255, 197, 0.07);
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 10px;
}
.mnt-chip-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mnt-chip-primary {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.mnt-chip-sub {
  font-size: 10px;
  color: var(--color-text-secondary);
  font-style: italic;
}
.mnt-chip-remove {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
  line-height: 1;
}
.mnt-chip-remove:hover {
  color: #EF4444;
}
.mnt-active-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mnt-active-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 0.15s;
}
.mnt-active-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mnt-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4affc5;
  box-shadow: 0 0 6px rgba(74, 255, 197, 0.5);
  flex-shrink: 0;
}
.mnt-active-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.mnt-active-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.mnt-active-email {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.mnt-active-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mnt-active-time {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: monospace;
}
[data-theme=light] .mnt-input:focus,
[data-theme=light] .mnt-textarea:focus {
  border-color: #1A6BE8;
  box-shadow: 0 0 0 3px rgba(26, 107, 232, 0.12);
}
[data-theme=light] .mnt-status--inactive {
  background: rgba(26, 107, 232, 0.05);
  border-color: rgba(26, 107, 232, 0.2);
}
[data-theme=light] .mnt-btn--disable {
  background: #1A6BE8;
  color: #fff;
}
[data-theme=light] .mnt-btn--disable:hover:not(:disabled) {
  background: #1558c9;
  box-shadow: 0 4px 16px rgba(26, 107, 232, 0.3);
}

/* src/pages/Admin/AdminMenuProfiles.css */
.amp-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.amp-loading {
  color: var(--color-text-muted);
  padding: 40px 0;
  text-align: center;
}
.amp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.amp-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}
.amp-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}
.amp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.amp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: border-color 0.18s;
}
.amp-card:hover {
  border-color: var(--color-accent);
}
.amp-card-body {
  flex: 1;
  min-width: 0;
}
.amp-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
}
.amp-sections-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.amp-section-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.12);
  color: var(--color-accent);
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 12px;
  font-weight: 500;
}
.amp-chip-icon {
  font-size: 13px;
}
.amp-chip-count {
  background: var(--color-accent);
  color: #000;
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.amp-no-sections {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}
.amp-card-members {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
  display: block;
}
.amp-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.amp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.amp-sections-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.amp-add-section-btn {
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.1);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.amp-add-section-btn:hover {
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.2);
}
.amp-sections-empty {
  background: var(--color-surface-alt, rgba(255,255,255,0.04));
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}
.amp-sections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amp-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-alt, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  gap: 12px;
}
.amp-section-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.amp-section-icon-preview {
  font-size: 20px;
  flex-shrink: 0;
}
.amp-section-icon-placeholder {
  font-size: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.amp-section-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.amp-section-row-items {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.amp-section-row-slugs {
  color: var(--color-text-muted);
}
.amp-section-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.amp-section-edit-btn,
.amp-section-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.15s;
}
.amp-section-edit-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.amp-section-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.amp-section-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.amp-step-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  background: rgba(var(--accent-rgb, 16,185,129), 0.08);
  border-left: 3px solid var(--color-accent);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
}
.amp-icon-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amp-icon-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.amp-icon-input {
  background: var(--color-input-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 22px;
  color: var(--color-text);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.amp-icon-input:focus {
  border-color: var(--color-accent);
}
.amp-icon-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
}
.amp-icon-preview-large {
  font-size: 40px;
}
.amp-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.amp-catalog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s;
}
.amp-catalog-item:hover {
  background: rgba(var(--accent-rgb, 16,185,129), 0.07);
}
.amp-catalog-item input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.amp-catalog-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.amp-catalog-label {
  font-size: 14px;
  color: var(--color-text);
  flex: 1;
}
@media (max-width: 640px) {
  .amp-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .amp-header > button,
  .amp-header > a {
    width: 100%;
    justify-content: center;
  }
  .amp-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .amp-card-actions {
    flex-direction: row;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
    gap: 8px;
  }
  .amp-section-row-items {
    max-width: 100%;
    -webkit-line-clamp: 3;
  }
  .amp-section-row {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .amp-section-row-left {
    flex: 1;
    min-width: 0;
  }
  .members-transfer-container {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .members-column {
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
  .members-column:last-child {
    border-bottom: none !important;
  }
  .members-column-header {
    padding: 12px 16px 8px !important;
  }
  .members-column-list {
    max-height: 200px !important;
  }
}
[data-theme=light] .amp-card:hover {
  border-color: #1A6BE8;
}
[data-theme=light] .amp-section-chip {
  background: rgba(26, 107, 232, 0.1);
  color: #1A6BE8;
}
[data-theme=light] .amp-chip-count {
  background: #1A6BE8;
  color: #fff;
}
.amp-card-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 10px 0 4px;
}
.amp-card-section-label:first-child {
  margin-top: 0;
}
.amp-card-section-label--main {
  color: var(--color-accent-alt, #a78bfa);
}
.amp-section-chip--main {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
}
[data-theme=light] .amp-section-chip--main {
  background: rgba(109, 40, 217, 0.1);
  color: #6d28d9;
}
.amp-form-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-alt, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.amp-form-block--main {
  border-color: rgba(167, 139, 250, 0.3);
}
.amp-block-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: -6px 0 2px;
  font-style: italic;
}
.amp-sections-label--main {
  color: #a78bfa;
}
.amp-toggle-all-btn {
  background: rgba(167, 139, 250, 0.1);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.amp-toggle-all-btn:hover {
  background: rgba(167, 139, 250, 0.2);
}
.amp-main-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}
.amp-main-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.13s;
  background: var(--color-surface);
}
.amp-main-menu-item:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.05);
}
.amp-main-menu-item.checked {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
}
.amp-main-menu-item input[type=checkbox] {
  accent-color: #a78bfa;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.amp-main-menu-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.amp-main-menu-label {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.members-transfer-container {
  display: flex;
  gap: 0;
  min-height: 320px;
}
.members-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}
.members-column:last-child {
  border-right: none;
}
.members-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--color-border);
}
.members-column-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.members-column-count {
  font-size: 12px;
  font-weight: 700;
  background: rgba(var(--accent-rgb, 16, 185, 129), 0.15);
  color: var(--color-accent);
  border-radius: 10px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}
.members-column-count.inactive {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
}
.members-column-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.members-column-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
  padding: 6px 0;
}
.members-column-loading {
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}
.members-column-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}
.members-column-empty-icon {
  font-size: 28px;
}
.member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  transition: background 0.12s;
}
.member-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb, 16,185,129), 0.2);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-action {
  flex-shrink: 0;
}
.member-add-btn,
.member-remove-btn {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.member-add-btn {
  background: rgba(var(--accent-rgb, 16,185,129), 0.15);
  color: var(--color-accent);
}
.member-add-btn:hover {
  background: rgba(var(--accent-rgb, 16,185,129), 0.25);
}
.member-remove-btn {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.member-remove-btn:hover {
  background: rgba(239, 68, 68, 0.22);
}

/* src/pages/Maintenance/MaintenancePage.css */
.maint-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0f1e;
  color: #fff;
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    sans-serif;
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.maint-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.maint-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  animation: maint-float 8s ease-in-out infinite alternate;
}
.maint-orb-1 {
  width: 500px;
  height: 500px;
  background:
    radial-gradient(
      circle,
      #4affc5,
      transparent);
  top: -120px;
  left: -120px;
  animation-duration: 9s;
}
.maint-orb-2 {
  width: 400px;
  height: 400px;
  background:
    radial-gradient(
      circle,
      #7c3aed,
      transparent);
  bottom: -100px;
  right: -80px;
  animation-duration: 11s;
  animation-delay: -3s;
}
.maint-orb-3 {
  width: 300px;
  height: 300px;
  background:
    radial-gradient(
      circle,
      #1A6BE8,
      transparent);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 7s;
  animation-delay: -1.5s;
}
@keyframes maint-float {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(30px, 20px) scale(1.05);
  }
}
.maint-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 56px 48px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 255, 197, 0.05);
}
.maint-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.maint-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.maint-icon--gear {
  background: rgba(74, 255, 197, 0.1);
  border: 2px solid rgba(74, 255, 197, 0.3);
  color: #4affc5;
  animation: maint-spin 4s linear infinite;
}
.maint-icon--back {
  background: rgba(74, 255, 197, 0.15);
  border: 2px solid #4affc5;
  color: #4affc5;
  animation: maint-pop 0.5s ease-out;
}
@keyframes maint-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes maint-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.maint-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.maint-title--back {
  color: #4affc5;
}
.maint-msg {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin: 0 0 28px;
}
.maint-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
}
.maint-return {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.15);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 0 0 28px;
}
.maint-return-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}
.maint-return-time {
  font-size: 18px;
  font-weight: 700;
  color: #4affc5;
}
.maint-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 16px;
}
.maint-progress-bar {
  height: 100%;
  width: 40%;
  background:
    linear-gradient(
      90deg,
      #4affc5,
      #7c3aed,
      #4affc5);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: maint-progress 2.5s ease-in-out infinite;
}
@keyframes maint-progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}
.maint-poll-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 24px;
}
.maint-countdown {
  font-weight: 700;
  color: #4affc5;
  font-size: 18px;
}
.maint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  text-decoration: none;
  background: #4affc5;
  color: #0a0f1e;
  border: none;
}
.maint-btn:hover {
  background: #6fffd3;
  transform: translateY(-1px);
}
.maint-btn--outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.maint-btn--outline:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-1px);
}
.maint-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
}

/* src/components/MaintenanceBanner/MaintenanceBanner.css */
.mnt-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background:
    linear-gradient(
      90deg,
      #7c2d12,
      #b45309,
      #92400e);
  background-size: 200% 100%;
  animation: mnt-banner-slide 0.4s ease, mnt-banner-shift 6s ease-in-out infinite;
  border-bottom: 1px solid rgba(255, 179, 71, 0.4);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
@keyframes mnt-banner-slide {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mnt-banner-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.mnt-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mnt-banner-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB347;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.6);
  animation: mnt-pulse 1.6s ease-out infinite;
}
@keyframes mnt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 179, 71, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 179, 71, 0);
  }
}
.mnt-banner-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.mnt-banner-text {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mnt-banner-text strong {
  font-weight: 700;
  color: #FFD580;
}
.mnt-banner-hint {
  font-size: 12px;
  opacity: 0.8;
  font-style: italic;
}
.mnt-banner-dismiss {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  line-height: 1.4;
}
.mnt-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* src/components/PushPromptModal/PushPromptModal.css */
.ppm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  animation: ppm-fade-in 0.25s ease;
}
.ppm-overlay--guide {
  z-index: 9200;
}
@keyframes ppm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ppm-modal {
  background: var(--color-surface, #151c2c);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  animation: ppm-slide-up 0.25s ease;
}
.ppm-modal--guide {
  max-width: 460px;
}
@keyframes ppm-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ppm-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.ppm-bell {
  font-size: 2.2rem;
  animation: ppm-ring 2.5s ease-in-out infinite;
  display: block;
  transform-origin: top center;
}
@keyframes ppm-ring {
  0%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-12deg);
  }
  30% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(0deg);
  }
}
.ppm-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(74, 255, 197, 0.4);
  animation: ppm-pulse 2s ease-out infinite;
}
@keyframes ppm-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
.ppm-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.02em;
}
.ppm-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.ppm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 0.25rem;
}
.ppm-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.ppm-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.ppm-toggle--on {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
}
.ppm-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}
.ppm-toggle--on .ppm-toggle-thumb {
  transform: translateX(22px);
}
.ppm-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}
.ppm-btn--primary {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00B89F);
  color: #0a0f1a;
}
.ppm-btn--primary:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}
.ppm-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ppm-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ppm-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}
.ppm-remind-note {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin: 0;
}
.ppm-guide-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}
.ppm-guide-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.ppm-guide-img-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.ppm-guide-img {
  width: 100%;
  height: auto;
  display: block;
}
.ppm-guide-steps {
  text-align: left;
  padding-left: 1.2rem;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 2;
  width: 100%;
}
.ppm-guide-steps li {
  color: var(--color-text);
}
.ppm-guide-steps strong {
  color: #4AFFC5;
}
[data-theme=light] .ppm-modal {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15);
}
[data-theme=light] .ppm-title {
  color: #1e293b;
}
[data-theme=light] .ppm-desc {
  color: #64748b;
}
[data-theme=light] .ppm-toggle-row {
  background: #f8fafc;
  border-color: #e2e8f0;
}
[data-theme=light] .ppm-toggle-label {
  color: #1e293b;
}
[data-theme=light] .ppm-toggle {
  background: #cbd5e1;
}
[data-theme=light] .ppm-toggle--on {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
}
[data-theme=light] .ppm-btn--primary {
  background:
    linear-gradient(
      135deg,
      #1A6BE8,
      #1250B0);
  color: #fff;
}
[data-theme=light] .ppm-btn--ghost {
  border-color: #d1d9e6;
  color: #64748b;
}
[data-theme=light] .ppm-btn--ghost:hover {
  background: #f1f5f9;
  color: #1e293b;
}
[data-theme=light] .ppm-guide-title {
  color: #1e293b;
}
[data-theme=light] .ppm-guide-desc {
  color: #64748b;
}
[data-theme=light] .ppm-guide-img-wrap {
  border-color: #e2e8f0;
  background: #f8fafc;
}
[data-theme=light] .ppm-guide-steps li {
  color: #1e293b;
}
[data-theme=light] .ppm-guide-steps strong {
  color: #1A6BE8;
}
[data-theme=light] .ppm-remind-note {
  color: #94a3b8;
}

/* src/components/CompliancePendingAlertModal/CompliancePendingAlertModal.css */
.compliance-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 15, 0.85);
  backdrop-filter: blur(8px);
  padding: 20px;
  animation: comp-modal-fade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes comp-modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.compliance-modal-box {
  position: relative;
  background:
    linear-gradient(
      145deg,
      #0d131f 0%,
      #080c14 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.15) inset,
    0 24px 64px rgba(0, 0, 0, 0.8),
    0 0 45px rgba(245, 158, 11, 0.12);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  animation: comp-modal-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}
@keyframes comp-modal-pop {
  from {
    transform: translateY(24px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.compliance-modal-ambient-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 140px;
  background:
    radial-gradient(
      circle,
      rgba(245, 158, 11, 0.25) 0%,
      transparent 70%);
  pointer-events: none;
}
.compliance-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compliance-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compliance-modal-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: comp-pulse 1.8s infinite;
}
@keyframes comp-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px #f59e0b;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}
.compliance-modal-doc-count {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.compliance-modal-content {
  position: relative;
  padding: 24px 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.compliance-modal-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.18) 0%,
      rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}
.compliance-modal-title {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}
.compliance-modal-description {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}
.compliance-modal-highlight {
  color: #fbbf24;
  font-weight: 600;
}
.compliance-modal-notice-card {
  width: 100%;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #38bdf8;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  text-align: left;
  box-sizing: border-box;
}
.notice-card-icon {
  color: #38bdf8;
  flex-shrink: 0;
  margin-top: 1px;
}
.notice-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notice-card-text strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
}
.notice-card-text span {
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}
.notice-card-text span strong {
  color: #38bdf8;
  font-weight: 600;
}
.compliance-modal-actions {
  padding: 16px 24px 22px;
  display: flex;
  justify-content: center;
}
.compliance-modal-btn-confirm {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background:
    linear-gradient(
      135deg,
      #f59e0b 0%,
      #d97706 100%);
  color: #0b0f19;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}
.compliance-modal-btn-confirm:hover {
  background:
    linear-gradient(
      135deg,
      #fbbf24 0%,
      #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}
.compliance-modal-btn-confirm:active {
  transform: translateY(0);
}

/* src/pages/Marketing/Meta/MetaDashboard.css */
.meta-dashboard {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
}
.meta-dashboard--loading {
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #64748b);
  gap: 12px;
  font-size: 14px;
}
.meta-dashboard__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meta-dashboard__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.meta-dashboard__logo {
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.meta-dashboard__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
  display: flex;
  align-items: center;
}
.meta-dashboard__subtitle {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin: 4px 0 0 26px;
}
.meta-dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.meta-dashboard__sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(0, 194, 255, 0.4);
  background: rgba(0, 194, 255, 0.08);
  color: #00c2ff;
  transition: all 0.2s;
}
.meta-dashboard__sync-btn:hover:not(:disabled) {
  background: rgba(0, 194, 255, 0.18);
  border-color: rgba(0, 194, 255, 0.7);
}
.meta-dashboard__sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.meta-dashboard__sync-btn--loading {
  opacity: 0.75;
}
.meta-dashboard__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #9ca3af);
  transition: all 0.2s;
}
.meta-dashboard__nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e8eaf0);
}
.meta-dashboard__success-msg {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  font-size: 13px;
}
.meta-dashboard__error-msg {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 13px;
}
.meta-dashboard__no-data {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
  font-size: 13.5px;
}
.meta-dashboard__filters {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.filter-select {
  padding: 7px 28px 7px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #e8eaf0);
  font-size: 13px;
  min-width: 200px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: border-color 0.2s;
}
.filter-select:focus {
  outline: none;
  border-color: rgba(0, 194, 255, 0.5);
}
.filter-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-preset-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-secondary, #9ca3af);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-preset-btn:hover {
  border-color: rgba(0, 194, 255, 0.4);
  color: #00c2ff;
}
.filter-preset-btn--active {
  background: rgba(0, 194, 255, 0.12);
  border-color: rgba(0, 194, 255, 0.5);
  color: #00c2ff;
}
.meta-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.kpi-card {
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, transform 0.15s;
}
.kpi-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.kpi-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpi-card__icon {
  font-size: 16px;
  line-height: 1;
}
.kpi-card__label {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kpi-card__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  line-height: 1.2;
}
.kpi-card__skeleton {
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.kpi-card__delta {
  font-size: 11px;
  font-weight: 500;
}
.kpi-card__delta--up {
  color: #4ade80;
}
.kpi-card__delta--down {
  color: #f87171;
}
.meta-dashboard__chart-card {
  padding: 20px 24px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.chart-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
}
.chart-card__metric-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.metric-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.metric-toggle::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--metric-color);
  opacity: 0.4;
}
.metric-toggle--active {
  border-color: var(--metric-color);
  color: var(--metric-color);
  background: color-mix(in srgb, var(--metric-color) 12%, transparent);
}
.metric-toggle--active::before {
  opacity: 1;
}
.chart-card__skeleton {
  height: 280px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  animation: pulse 1.5s ease-in-out infinite;
}
.chart-card__empty {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}
.chart-tooltip {
  background: rgba(15, 20, 35, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.chart-tooltip__date {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-bottom: 6px;
  font-weight: 600;
}
.chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--text-primary, #e8eaf0);
}
.chart-tooltip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-tooltip__name {
  color: var(--text-secondary, #9ca3af);
  flex: 1;
}
.chart-tooltip__val {
  font-weight: 600;
}
.meta-dashboard__campaigns-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.campaigns-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.campaigns-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
}
.campaigns-card__view-all {
  font-size: 12px;
  color: #00c2ff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.campaigns-card__view-all:hover {
  background: rgba(0, 194, 255, 0.1);
}
.campaigns-card__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}
.campaigns-table__skeleton {
  height: 160px;
  background: rgba(255, 255, 255, 0.04);
  animation: pulse 1.5s ease-in-out infinite;
  margin: 16px;
  border-radius: 8px;
}
.campaigns-table-wrap {
  overflow-x: auto;
}
.campaigns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.campaigns-table thead tr {
  background: rgba(255, 255, 255, 0.03);
}
.campaigns-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.campaigns-table th.num {
  text-align: right;
}
.campaigns-table__row {
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.campaigns-table__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.campaigns-table__row:last-child {
  border-bottom: none;
}
.campaigns-table td {
  padding: 11px 16px;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}
.campaigns-table td.num {
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
}
.campaigns-table__name {
  color: var(--text-primary, #e8eaf0) !important;
  font-weight: 500;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campaigns-table__obj {
  font-size: 12px;
}
.campaigns-table__action-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #64748b);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.campaigns-table__action-btn:hover {
  border-color: #00c2ff;
  color: #00c2ff;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--badge-color) 40%, transparent);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  color: var(--badge-color);
}
.status-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--badge-color);
}
.meta-dashboard__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 60px 40px;
  flex: 1;
}
.meta-dashboard__empty h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
}
.meta-dashboard__empty p {
  font-size: 14px;
  color: var(--text-secondary, #9ca3af);
  max-width: 380px;
  line-height: 1.6;
  margin: 0;
}
.meta-dashboard__connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 22px;
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.meta-dashboard__connect-btn:hover {
  background: #166fe5;
  transform: translateY(-1px);
}
.spin {
  display: inline-block;
  animation: metaSpin 0.7s linear infinite;
}
@keyframes metaSpin {
  to {
    transform: rotate(360deg);
  }
}

/* src/pages/Marketing/Meta/MetaConnect.css */
.meta-connect {
  padding: 28px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.meta-connect__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.meta-connect__header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.meta-connect__platform-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(24, 119, 242, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.meta-connect__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  margin: 0 0 2px;
}
.meta-connect__subtitle {
  font-size: 13.5px;
  color: var(--text-muted, #64748b);
  margin: 0;
}
.meta-connect__back-btn {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  transition: all 0.15s;
}
.meta-connect__back-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #e8eaf0);
}
.meta-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.meta-alert--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.meta-alert--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.meta-alert__close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
  flex-shrink: 0;
}
.meta-alert__close:hover {
  opacity: 1;
}
.meta-connect__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta-connect__section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
.meta-connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.meta-connection-card {
  background: var(--bg-secondary, #1a1d27);
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meta-connection-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.meta-connection-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #1877f2,
      #42a5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.meta-connection-card__info {
  flex: 1;
  min-width: 0;
}
.meta-connection-card__name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  truncate: true;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-connection-card__email {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-connection-card__status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.meta-connection-card__status--valid {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}
.meta-connection-card__status--expired {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.meta-connection-card__expiry {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.meta-connection-card__accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.meta-connection-card__accounts-label {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  width: 100%;
}
.meta-connection-card__account-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-secondary, #9ca3af);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.meta-connection-card__account-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.meta-connection-card__account-status.active {
  background: #4ade80;
}
.meta-connection-card__account-status.inactive {
  background: #64748b;
}
.meta-connection-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.meta-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.meta-tab {
  padding: 7px 16px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.meta-tab:hover {
  color: var(--text-primary, #e8eaf0);
}
.meta-tab--active {
  background: var(--bg-secondary, #1a1d27);
  color: var(--text-primary, #e8eaf0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.meta-connect__panel {
  background: var(--bg-secondary, #1a1d27);
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta-connect__info-box {
  background: rgba(0, 194, 255, 0.04);
  border: 1px solid rgba(0, 194, 255, 0.1);
  border-radius: 8px;
  padding: 14px 16px;
}
.meta-connect__info-box--warning {
  background: rgba(251, 191, 36, 0.04);
  border-color: rgba(251, 191, 36, 0.12);
}
.meta-connect__info-box h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  margin: 0 0 6px;
}
.meta-connect__info-box p {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
  line-height: 1.5;
}
.meta-connect__info-box a {
  color: #00c2ff;
  text-decoration: none;
}
.meta-connect__info-box a:hover {
  text-decoration: underline;
}
.meta-connect__scopes {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-connect__scopes li {
  font-size: 12.5px;
  color: var(--text-secondary, #9ca3af);
}
.meta-connect__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.meta-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.meta-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
}
.meta-required {
  color: #f87171;
}
.meta-form-input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e8eaf0);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
  font-family: "Inter", monospace;
}
.meta-form-input:focus {
  border-color: rgba(0, 194, 255, 0.4);
}
.meta-form-hint {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
}
.meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.meta-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.meta-btn--primary {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
}
.meta-btn--primary:hover:not(:disabled) {
  background: #1565d8;
}
.meta-btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #9ca3af);
  border-color: rgba(255, 255, 255, 0.08);
}
.meta-btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary, #e8eaf0);
}
.meta-btn--danger {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.15);
}
.meta-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.14);
}
.meta-btn--large {
  padding: 11px 22px;
  font-size: 14px;
}
.meta-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: metaSpin 0.6s linear infinite;
  display: inline-block;
}
@keyframes metaSpin {
  to {
    transform: rotate(360deg);
  }
}
.meta-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-secondary, #1a1d27);
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 12px;
  overflow: hidden;
}
.meta-setup-step {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
  align-items: flex-start;
}
.meta-setup-step:last-child {
  border-bottom: none;
}
.meta-setup-step__number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.12);
  color: #00c2ff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.meta-setup-step strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  margin-bottom: 3px;
}
.meta-setup-step p {
  font-size: 12.5px;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
  line-height: 1.5;
}
.meta-setup-step a {
  color: #00c2ff;
  text-decoration: none;
}
.meta-setup-step code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11.5px;
  color: #a5f3fc;
}
.meta-setup-step--done {
  background: rgba(74, 255, 197, 0.04);
}
.meta-setup-step--done .meta-setup-step__number {
  background: rgba(74, 255, 197, 0.15);
  color: #4AFFC5;
}
.meta-setup-step--pending {
  background: rgba(251, 191, 36, 0.04);
}
.meta-setup-step--pending .meta-setup-step__number {
  background: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
}
.meta-setup-step__action-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 5px 14px;
  border-radius: 7px;
  background: rgba(0, 194, 255, 0.08);
  border: 1px solid rgba(0, 194, 255, 0.2);
  color: #00c2ff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.meta-setup-step__action-btn:hover {
  background: rgba(0, 194, 255, 0.14);
}
.meta-setup-step--done .meta-setup-step__action-btn {
  background: rgba(74, 255, 197, 0.08);
  border-color: rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
}
.meta-app-warning-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  flex-wrap: wrap;
}
.meta-app-warning-banner__icon {
  font-size: 22px;
  flex-shrink: 0;
}
.meta-app-warning-banner__content {
  flex: 1;
  min-width: 200px;
}
.meta-app-warning-banner__content strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #FBBF24;
  margin-bottom: 3px;
}
.meta-app-warning-banner__content p {
  font-size: 12.5px;
  color: rgba(251, 191, 36, 0.8);
  margin: 0;
  line-height: 1.5;
}
.meta-app-warning-banner__btn {
  padding: 7px 16px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #FBBF24;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.meta-app-warning-banner__btn:hover {
  background: rgba(251, 191, 36, 0.22);
}
.meta-app-ok-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(74, 255, 197, 0.06);
  border: 1px solid rgba(74, 255, 197, 0.2);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(74, 255, 197, 0.9);
}
.meta-app-ok-banner__link {
  margin-left: auto;
  color: rgba(74, 255, 197, 0.7);
  font-size: 12px;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(74, 255, 197, 0.2);
  transition: background 0.15s;
  flex-shrink: 0;
}
.meta-app-ok-banner__link:hover {
  background: rgba(74, 255, 197, 0.08);
  color: #4AFFC5;
}
.meta-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  margin-left: 4px;
}
.meta-tab-badge.ok {
  background: rgba(74, 255, 197, 0.2);
  color: #4AFFC5;
}
.meta-tab-badge.warn {
  background: rgba(251, 191, 36, 0.2);
  color: #FBBF24;
}
.mc-app-panel {
  gap: 20px;
}
.mc-app-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mc-app-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.mc-app-status-badge.configured {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
}
.mc-app-status-badge.not-configured {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #FBBF24;
}
.mc-app-devlink {
  font-size: 12px;
  color: #1877f2;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(24, 119, 242, 0.2);
  background: rgba(24, 119, 242, 0.06);
  transition: background 0.15s;
  white-space: nowrap;
}
.mc-app-devlink:hover {
  background: rgba(24, 119, 242, 0.12);
}
.mc-app-info {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}
.mc-app-info p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary, #9ca3af);
  line-height: 1.6;
}
.mc-app-info a {
  color: #00c2ff;
  text-decoration: none;
}
.mc-app-error {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #f87171;
  font-size: 12.5px;
}
.mc-app-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mc-app-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mc-app-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
}
.mc-app-configured-mark {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.25);
  color: #4AFFC5;
  font-style: normal;
}
.mc-app-input-wrap {
  position: relative;
}
.mc-app-input {
  width: 100%;
  padding: 9px 40px 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e8eaf0);
  font-size: 13px;
  font-family:
    "JetBrains Mono",
    "Courier New",
    monospace;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.mc-app-input:focus {
  border-color: rgba(24, 119, 242, 0.5);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
}
.mc-app-input::placeholder {
  color: rgba(156, 163, 175, 0.5);
  font-size: 11.5px;
}
.mc-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.55;
  transition: opacity 0.15s;
  padding: 2px;
}
.mc-eye-btn:hover {
  opacity: 1;
}
.mc-app-hint {
  font-size: 11px;
  color: rgba(100, 116, 139, 0.8);
  line-height: 1.4;
}
.mc-app-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .mc-app-row-2col {
    grid-template-columns: 1fr;
  }
}
.mc-redirect-uri-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 10px;
  overflow: hidden;
}
.mc-redirect-uri-code {
  flex: 1;
  font-size: 10.5px;
  font-family: "JetBrains Mono", monospace;
  color: #a5f3fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.mc-copy-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 194, 255, 0.2);
  background: rgba(0, 194, 255, 0.07);
  color: #00c2ff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.mc-copy-btn:hover {
  background: rgba(0, 194, 255, 0.14);
}
.mc-app-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 10px;
  border: none;
  background:
    linear-gradient(
      135deg,
      #1877f2,
      #0f5bbf);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  width: 100%;
}
.mc-app-save-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.mc-app-save-btn.saved {
  background:
    linear-gradient(
      135deg,
      #4AFFC5,
      #00BFA5);
  color: #000;
}
.mc-app-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.mc-app-security {
  font-size: 11.5px;
  color: rgba(100, 116, 139, 0.8);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.mc-app-needed-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 9px;
  font-size: 12.5px;
  color: rgba(251, 191, 36, 0.9);
  flex-wrap: wrap;
}
.mc-app-needed-link {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.1);
  color: #FBBF24;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.mc-app-needed-link:hover {
  background: rgba(251, 191, 36, 0.18);
}

/* src/pages/Marketing/Meta/StatusChangeModal.css */
.status-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.status-modal {
  background: var(--bg-secondary, #1a1d27);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
  overflow: hidden;
}
@keyframes slideUp {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.status-modal--activate {
  border-top: 3px solid #22c55e;
}
.status-modal--pause {
  border-top: 3px solid #f59e0b;
}
.status-modal--archive {
  border-top: 3px solid #64748b;
}
.status-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.status-modal__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
.status-modal--activate .status-modal__icon-wrap {
  background: rgba(34, 197, 94, 0.15);
}
.status-modal--pause .status-modal__icon-wrap {
  background: rgba(245, 158, 11, 0.15);
}
.status-modal--archive .status-modal__icon-wrap {
  background: rgba(100, 116, 139, 0.15);
}
.status-modal__icon {
  font-size: 18px;
}
.status-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  margin: 0 0 2px;
}
.status-modal__subtitle {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
}
.status-modal__close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.status-modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e8eaf0);
}
.status-modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.status-modal__object {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.status-modal__object-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.status-modal__object-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-modal__warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #fbbf24;
  line-height: 1.5;
}
.status-modal__warning strong {
  color: #fde68a;
}
.status-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.status-modal__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
}
.status-modal__required {
  color: #ef4444;
  margin-left: 2px;
}
.status-modal__textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-primary, #e8eaf0);
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.15s;
  outline: none;
}
.status-modal__textarea:focus {
  border-color: rgba(0, 194, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.07);
}
.status-modal__textarea--error {
  border-color: #ef4444 !important;
}
.status-modal__textarea::placeholder {
  color: var(--text-muted, #64748b);
}
.status-modal__error {
  font-size: 12px;
  color: #ef4444;
  margin: 0;
}
.status-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}
.status-modal__btn {
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-modal__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.status-modal__btn--cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #9ca3af);
}
.status-modal__btn--cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #e8eaf0);
}
.status-modal__btn--confirm {
  color: #fff;
}
.status-modal--activate .status-modal__btn--confirm {
  background: #16a34a;
}
.status-modal--activate .status-modal__btn--confirm:hover:not(:disabled) {
  background: #15803d;
}
.status-modal--pause .status-modal__btn--confirm {
  background: #d97706;
}
.status-modal--pause .status-modal__btn--confirm:hover:not(:disabled) {
  background: #b45309;
}
.status-modal--archive .status-modal__btn--confirm {
  background: #475569;
}
.status-modal--archive .status-modal__btn--confirm:hover:not(:disabled) {
  background: #334155;
}
.status-modal__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* src/pages/Marketing/Meta/MetaCampaignForm.css */
.campaign-form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.campaign-form {
  background: var(--bg-secondary, #1a1d27);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid #1877f2;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
  overflow: hidden;
}
@keyframes slideUp {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.campaign-form__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.campaign-form__header-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.campaign-form__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  margin: 0 0 3px;
}
.campaign-form__subtitle {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
}
.campaign-form__close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.campaign-form__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e8eaf0);
}
.campaign-form__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.campaign-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.campaign-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.campaign-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
}
.campaign-form__req {
  color: #ef4444;
}
.campaign-form__input,
.campaign-form__select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text-primary, #e8eaf0);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.campaign-form__input:focus,
.campaign-form__select:focus {
  border-color: rgba(24, 119, 242, 0.5);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.08);
}
.campaign-form__input::placeholder {
  color: var(--text-muted, #64748b);
}
.campaign-form__input--error {
  border-color: #ef4444 !important;
}
.campaign-form__select option {
  background: #1a1d27;
}
.campaign-form__input-prefix {
  display: flex;
  align-items: center;
}
.campaign-form__prefix {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  white-space: nowrap;
}
.campaign-form__input--prefixed {
  border-radius: 0 10px 10px 0 !important;
}
.campaign-form__error {
  font-size: 12px;
  color: #ef4444;
  margin: 0;
}
.campaign-form__hint {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin: 0;
}
.campaign-form__radio-group {
  display: flex;
  gap: 8px;
}
.campaign-form__radio {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  transition: all 0.15s;
  flex: 1;
  justify-content: center;
}
.campaign-form__radio input {
  display: none;
}
.campaign-form__radio--active {
  border-color: rgba(24, 119, 242, 0.5);
  background: rgba(24, 119, 242, 0.08);
  color: #60a5fa;
}
.campaign-form__radio:hover:not(.campaign-form__radio--active) {
  background: rgba(255, 255, 255, 0.06);
}
.campaign-form__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #fbbf24;
  line-height: 1.5;
}
.campaign-form__notice strong {
  color: #fde68a;
}
.campaign-form__api-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #f87171;
}
.campaign-form__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.campaign-form__btn {
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.campaign-form__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.campaign-form__btn--cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #9ca3af);
}
.campaign-form__btn--cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #e8eaf0);
}
.campaign-form__btn--submit {
  background: #1877f2;
  color: #fff;
}
.campaign-form__btn--submit:hover:not(:disabled) {
  background: #1565c0;
}
.campaign-form__spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 520px) {
  .campaign-form__row {
    grid-template-columns: 1fr;
  }
  .campaign-form__radio-group {
    flex-direction: column;
  }
}

/* src/pages/Marketing/Meta/MetaCampaigns.css */
.meta-page {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
}
.meta-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.meta-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-bottom: 6px;
}
.breadcrumb-link {
  cursor: pointer;
  transition: color 0.15s;
}
.breadcrumb-link:hover {
  color: #00c2ff;
}
.breadcrumb-sep {
  opacity: 0.5;
}
.meta-page__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
}
.meta-page__subtitle {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin: 4px 0 0;
}
.meta-page__header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.meta-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(0, 194, 255, 0.4);
  background: rgba(0, 194, 255, 0.08);
  color: #00c2ff;
  transition: all 0.2s;
}
.meta-sync-btn:hover:not(:disabled) {
  background: rgba(0, 194, 255, 0.16);
  border-color: rgba(0, 194, 255, 0.7);
}
.meta-sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.meta-page__success {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  font-size: 13px;
}
.meta-page__error {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 13px;
}
.meta-page__filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.meta-filter-select,
.meta-filter-input {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e8eaf0);
  font-size: 13px;
  transition: border-color 0.2s;
}
.meta-filter-select {
  min-width: 180px;
}
.meta-filter-select--sm {
  min-width: 150px;
}
.meta-filter-input {
  min-width: 240px;
}
.meta-filter-select:focus,
.meta-filter-input:focus {
  outline: none;
  border-color: rgba(0, 194, 255, 0.5);
}
.meta-filter-input::placeholder {
  color: var(--text-muted, #64748b);
}
.meta-table-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meta-table-card__info {
  padding: 12px 20px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.meta-table-wrap {
  overflow-x: auto;
}
.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.meta-table thead tr {
  background: rgba(255, 255, 255, 0.025);
}
.meta-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.meta-table th.num {
  text-align: right;
}
.meta-table__row {
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.meta-table__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.meta-table__row:last-child {
  border-bottom: none;
}
.meta-table td {
  padding: 11px 16px;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}
.meta-table td.num {
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
}
.meta-table__name {
  color: var(--text-primary, #e8eaf0) !important;
  font-weight: 500;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-table__obj {
  font-size: 12px;
}
.meta-table__action-btn {
  background: rgba(0, 194, 255, 0.07);
  border: 1px solid rgba(0, 194, 255, 0.25);
  color: #00c2ff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.meta-table__action-btn:hover {
  background: rgba(0, 194, 255, 0.14);
  border-color: rgba(0, 194, 255, 0.5);
}
.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--badge-color) 40%, transparent);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  color: var(--badge-color);
}
.meta-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--badge-color);
}
.meta-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 56px 24px;
  font-size: 32px;
  text-align: center;
}
.meta-empty p {
  font-size: 14px;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
}
.meta-empty__hint {
  font-size: 12px !important;
  color: var(--text-muted, #64748b) !important;
}
.meta-skeleton {
  height: 200px;
  margin: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  animation: meta-pulse 1.5s ease-in-out infinite;
}
@keyframes meta-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.meta-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.meta-pag-btn {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-secondary, #9ca3af);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.meta-pag-btn:hover:not(:disabled) {
  border-color: #00c2ff;
  color: #00c2ff;
}
.meta-pag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.meta-pag-info {
  font-size: 13px;
  color: var(--text-muted, #64748b);
}
.spin {
  display: inline-block;
  animation: meta-spin 0.7s linear infinite;
}
@keyframes meta-spin {
  to {
    transform: rotate(360deg);
  }
}
.meta-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #1877f2;
  color: #fff;
  transition: background 0.2s;
}
.meta-create-btn:hover:not(:disabled) {
  background: #1565c0;
}
.meta-create-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.meta-table th.actions-col {
  text-align: center;
}
.meta-table__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.meta-table__action-btn--view {
  background: rgba(0, 194, 255, 0.07);
  border-color: rgba(0, 194, 255, 0.25);
  color: #00c2ff;
}
.meta-table__action-btn--view:hover {
  background: rgba(0, 194, 255, 0.14);
  border-color: rgba(0, 194, 255, 0.5);
}
.meta-table__action-btn--edit {
  background: rgba(148, 163, 184, 0.07);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  font-size: 14px;
  padding: 4px 9px;
}
.meta-table__action-btn--edit:hover {
  background: rgba(148, 163, 184, 0.14);
  color: #e8eaf0;
}
.meta-table__action-btn--activate {
  background: rgba(34, 197, 94, 0.07);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #22c55e;
}
.meta-table__action-btn--activate:hover {
  background: rgba(34, 197, 94, 0.14);
}
.meta-table__action-btn--pause {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}
.meta-table__action-btn--pause:hover {
  background: rgba(245, 158, 11, 0.14);
}
.meta-table__action-btn--archive {
  background: rgba(100, 116, 139, 0.07);
  border: 1px solid rgba(100, 116, 139, 0.2);
  color: #64748b;
}
.meta-table__action-btn--archive:hover {
  background: rgba(100, 116, 139, 0.14);
}
.meta-empty__link {
  background: none;
  border: none;
  color: #00c2ff;
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.meta-empty__link:hover {
  color: #38d4ff;
}

/* src/pages/Marketing/Meta/MetaAuditLog.css */
.audit-page {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
}
.audit-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.audit-page__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e8eaf0);
  margin: 0;
}
.audit-page__subtitle {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin: 4px 0 0;
}
.audit-page__filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.audit-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audit-date-sep {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.audit-clear-btn {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.07);
  color: #f87171;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.audit-clear-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
}
.audit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--badge-color) 35%, transparent);
  background: color-mix(in srgb, var(--badge-color) 10%, transparent);
  color: var(--badge-color);
  white-space: nowrap;
}
.audit-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--status-color);
}
.audit-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-color);
  flex-shrink: 0;
}
.audit-table th,
.audit-table td {
  white-space: nowrap;
}
.audit-table__date {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-family: "JetBrains Mono", monospace;
}
.audit-table__resource {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audit-table__resource-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #e8eaf0);
}
.audit-table__resource-id {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  font-family: "JetBrains Mono", monospace;
}
.audit-table__status-change {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 5px;
  padding: 2px 7px;
}
.audit-table__just-text {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.audit-table__no-just {
  color: var(--text-muted, #64748b);
}
.audit-expand-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #64748b);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.audit-expand-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e8eaf0);
}
.audit-table__detail td {
  background: rgba(0, 0, 0, 0.2);
  padding: 0 !important;
}
.audit-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.audit-detail__section {
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-detail__section strong {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
}
.audit-detail__section pre {
  margin: 0;
  font-family:
    "JetBrains Mono",
    "Courier New",
    monospace;
  font-size: 11.5px;
  color: #94a3b8;
  overflow-x: auto;
  max-height: 200px;
  line-height: 1.5;
}
.audit-detail__section span {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  font-family: "JetBrains Mono", monospace;
}
@media (max-width: 700px) {
  .audit-detail {
    grid-template-columns: 1fr;
  }
}

/* src/pages/Marketing/Meta/MetaMediaLibrary.css */
.media-library {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
}
.media-library__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.media-library__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.media-library__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.media-library__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.media-lib-btn {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.media-lib-btn--image {
  background:
    linear-gradient(
      135deg,
      #667eea,
      #764ba2);
  color: #fff;
}
.media-lib-btn--image:hover {
  opacity: 0.9;
}
.media-lib-btn--video {
  background:
    linear-gradient(
      135deg,
      #f093fb,
      #f5576c);
  color: #fff;
}
.media-lib-btn--video:hover {
  opacity: 0.9;
}
.media-lib-btn--sync {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0.65rem;
}
.media-lib-btn--sync:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}
.media-lib-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.media-library__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.media-filter-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.media-filter-btn:hover {
  border-color: rgba(99, 102, 241, 0.5);
  color: #f1f5f9;
}
.media-filter-btn--active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.6);
  color: #a5b4fc;
}
.media-library__count {
  margin-left: auto;
  font-size: 0.75rem;
  color: #64748b;
}
.media-upload-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 10px;
}
.media-upload-progress__bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.media-upload-progress__fill {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #6366f1,
      #a855f7);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.media-upload-progress__label {
  font-size: 0.78rem;
  color: #a5b4fc;
  white-space: nowrap;
  font-weight: 600;
}
.media-upload-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 0.85rem;
}
.media-upload-error button {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 0.25rem;
}
.media-library__error,
.media-library__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  color: #64748b;
}
.media-library__empty-icon {
  font-size: 3rem;
}
.media-library__error button,
.media-library__empty button {
  margin-top: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  cursor: pointer;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.media-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}
.media-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.media-card--selectable {
  cursor: pointer;
}
.media-card--selected {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4) !important;
}
.media-card--skeleton {
  height: 190px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 25%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.media-card__thumb {
  position: relative;
  width: 100%;
  height: 110px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-card__thumb-placeholder,
.media-card__thumb-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  flex-direction: column;
  gap: 0.25rem;
  background:
    linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.1),
      rgba(168, 85, 247, 0.1));
}
.media-card__play-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.5);
}
.media-card__processing-badge,
.media-card__error-badge {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.media-card__processing-badge {
  background: rgba(245, 158, 11, 0.8);
  color: #fff;
}
.media-card__error-badge {
  background: rgba(239, 68, 68, 0.8);
  color: #fff;
}
.media-card__spinner {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.media-card__selected-overlay {
  position: absolute;
  inset: 0;
  background: rgba(99, 102, 241, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
}
.media-card__info {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.media-card__filename {
  font-size: 0.75rem;
  color: #e2e8f0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.media-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: #64748b;
  margin: 0;
}
.media-card__badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
}
.media-card__date {
  font-size: 0.67rem;
  color: #475569;
  margin: 0;
}
.media-card__copy-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #64748b;
  font-size: 0.65rem;
  padding: 2px 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-card__copy-btn:hover {
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
@media (max-width: 640px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* src/pages/Marketing/Meta/MetaCreatives.css */
.meta-creatives {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.meta-creatives__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.meta-creatives__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.meta-creatives__title-row h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.meta-creatives__actions {
  display: flex;
  gap: 0.5rem;
}
.mc-btn {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mc-btn--sync {
  background: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mc-btn--sync:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}
.mc-btn--create {
  background:
    linear-gradient(
      135deg,
      #6366f1,
      #a855f7);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}
.mc-btn--create:hover {
  opacity: 0.9;
}
.mc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.meta-creatives__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mc-filter-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.mc-filter-btn:hover {
  border-color: rgba(99, 102, 241, 0.5);
  color: #f1f5f9;
}
.mc-filter-btn--active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.6);
  color: #a5b4fc;
}
.meta-creatives__count {
  margin-left: auto;
  font-size: 0.75rem;
  color: #64748b;
}
.meta-creatives__error {
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 0.85rem;
}
.meta-creatives__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  color: #64748b;
}
.meta-creatives__loading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mc-row-skeleton {
  height: 52px;
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 25%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.mc-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
.mc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.mc-table thead tr {
  background: rgba(0, 0, 0, 0.3);
}
.mc-table th {
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mc-table td {
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.mc-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mc-table tbody tr:last-child td {
  border-bottom: none;
}
.mc-creative-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.mc-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.mc-thumb-placeholder {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.mc-creative-name {
  font-weight: 500;
  color: #f1f5f9;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mc-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}
.mc-status-badge--active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.mc-status-badge--deleted {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.mc-status-badge--unknown {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}
.mc-date {
  color: #64748b;
  font-size: 0.78rem;
}
.mc-copy-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #64748b;
  font-size: 0.72rem;
  padding: 3px 8px;
  cursor: pointer;
  font-family: monospace;
  transition: all 0.2s;
}
.mc-copy-btn:hover {
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
.mc-action-btns {
  display: flex;
  gap: 0.35rem;
}
.mc-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #94a3b8;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.mc-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}
.creatives-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.creatives-preview-modal {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.creatives-preview-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}
.creatives-preview-modal__header button {
  background: none;
  border: none;
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
}
.creatives-preview-modal__formats {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.creatives-preview-format {
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #64748b;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}
.creatives-preview-format:hover {
  color: #f1f5f9;
}
.creatives-preview-format--active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
}
.creatives-preview-modal__body {
  padding: 1.25rem;
  display: flex;
  justify-content: center;
  min-height: 200px;
}
.creatives-preview-loading {
  color: #64748b;
  font-size: 0.85rem;
  margin: auto;
}

/* src/pages/Marketing/Meta/MetaCreativeBuilder.css */
.creative-builder {
  position: relative;
}
.creative-builder__media-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.creative-builder__media-panel {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.5rem;
}
.creative-builder__media-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.creative-builder__media-header h3 {
  font-size: 1.1rem;
  color: #f1f5f9;
  margin: 0;
}
.creative-builder__media-header button {
  background: none;
  border: none;
  color: #64748b;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
}
.creative-builder__media-header button:hover {
  color: #f1f5f9;
}
.creative-builder__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.creative-builder__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.creative-builder__header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.creative-builder__cancel {
  background: none;
  border: none;
  color: #64748b;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}
.creative-builder__cancel:hover {
  color: #f87171;
}
.creative-type-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.4rem;
  border-radius: 12px;
}
.creative-type-tab {
  flex: 1;
  min-width: 100px;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.2s;
  white-space: nowrap;
}
.creative-type-tab:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
}
.creative-type-tab--active {
  background: rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.4);
}
.cb-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cb-field-group--flex {
  flex: 1;
}
.cb-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cb-input,
.cb-textarea,
.cb-select {
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.cb-input:focus,
.cb-textarea:focus,
.cb-select:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.6);
  background: rgba(99, 102, 241, 0.05);
}
.cb-input::placeholder,
.cb-textarea::placeholder {
  color: #475569;
}
.cb-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.cb-select option {
  background: #1e293b;
  color: #f1f5f9;
}
.cb-char-count {
  font-size: 0.72rem;
  color: #475569;
  text-align: right;
}
.cb-hint {
  font-size: 0.75rem;
  color: #64748b;
}
.cb-hash {
  font-size: 0.72rem;
  color: #475569;
  font-family: monospace;
  margin: 0;
}
.cb-media-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  flex-wrap: wrap;
}
.cb-media-preview {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(99, 102, 241, 0.4);
}
.cb-media-empty {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #475569;
}
.cb-media-btn {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.cb-media-btn:hover {
  background: rgba(99, 102, 241, 0.2);
}
.cb-media-btn--sm {
  font-size: 0.72rem;
  padding: 0.3rem 0.65rem;
}
.cb-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cb-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cb-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cb-card__num {
  font-size: 0.78rem;
  font-weight: 700;
  color: #a5b4fc;
}
.cb-card__remove {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.cb-card__remove:hover {
  color: #f87171;
}
.cb-card__media {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cb-card__img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 6px;
}
.cb-card__img-empty {
  width: 60px;
  height: 45px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #475569;
}
.cb-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cb-add-card {
  padding: 0.5rem;
  border: 1px dashed rgba(99, 102, 241, 0.4);
  border-radius: 8px;
  background: transparent;
  color: #a5b4fc;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.cb-add-card:hover {
  background: rgba(99, 102, 241, 0.1);
}
.cb-preview {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.cb-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cb-preview__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cb-preview__formats {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.cb-preview__format-btn {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #64748b;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}
.cb-preview__format-btn:hover {
  color: #f1f5f9;
}
.cb-preview__format-btn--active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
}
.cb-preview__iframe {
  padding: 1rem;
  display: flex;
  justify-content: center;
}
.cb-preview__iframe iframe {
  border: none;
  border-radius: 8px;
  max-width: 100%;
}
.cb-preview__loading {
  padding: 2rem;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
}
.cb-alert {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}
.cb-alert--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.cb-alert--success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}
.cb-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.cb-btn {
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.cb-btn--cancel {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cb-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
.cb-btn--submit {
  background:
    linear-gradient(
      135deg,
      #6366f1,
      #a855f7);
  color: #fff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.cb-btn--submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.cb-btn--submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* src/pages/Marketing/Meta/MetaLeads.css */
.meta-leads {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  background: #0f1117;
}
.meta-leads__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.meta-leads__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.meta-leads__badge-new {
  background:
    linear-gradient(
      135deg,
      #e85d04,
      #f48c06);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.08);
  }
}
.meta-leads__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.leads-kpi {
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 0.2s, transform 0.2s;
}
.leads-kpi:hover {
  border-color: #4c5bfe;
  transform: translateY(-2px);
}
.leads-kpi__label {
  font-size: 0.72rem;
  color: #8a8fa8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.leads-kpi__value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.leads-kpi--total .leads-kpi__value {
  color: #4c5bfe;
}
.leads-kpi--new .leads-kpi__value {
  color: #e85d04;
}
.leads-kpi--contact .leads-kpi__value {
  color: #f48c06;
}
.leads-kpi--convert .leads-kpi__value {
  color: #2ecc71;
}
.leads-kpi--disq .leads-kpi__value {
  color: #6c757d;
}
.meta-leads__filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 1rem 1.25rem;
}
.leads-filter-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.leads-tab {
  background: transparent;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.leads-tab:hover {
  border-color: #4c5bfe;
  color: #c0c7ff;
}
.leads-tab--active {
  background: #4c5bfe;
  border-color: #4c5bfe;
  color: #fff;
}
.leads-filter-sep {
  width: 1px;
  height: 22px;
  background: #2a2d3e;
  margin: 0 0.25rem;
}
.leads-filter-select {
  background: #131622;
  border: 1px solid #2a2d3e;
  color: #c8cde0;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.leads-filter-search {
  flex: 1;
  min-width: 180px;
  background: #131622;
  border: 1px solid #2a2d3e;
  color: #c8cde0;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
}
.leads-filter-search::placeholder {
  color: #5a5f78;
}
.leads-filter-search:focus {
  outline: none;
  border-color: #4c5bfe;
}
.leads-export-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: transparent;
  border: 1px solid #2ecc71;
  color: #2ecc71;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.leads-export-btn:hover {
  background: #2ecc7118;
}
.meta-leads__table-wrap {
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  overflow: hidden;
}
.meta-leads__table {
  width: 100%;
  border-collapse: collapse;
}
.meta-leads__table th {
  background: #141725;
  color: #6a7090;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid #2a2d3e;
}
.meta-leads__table td {
  padding: 0.85rem 1.1rem;
  color: #c8cde0;
  font-size: 0.85rem;
  border-bottom: 1px solid #1f2235;
  vertical-align: middle;
}
.meta-leads__table tr:last-child td {
  border-bottom: none;
}
.meta-leads__table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.meta-leads__table tbody tr:hover {
  background: #1f2338;
}
.lead-name {
  font-weight: 600;
  color: #e0e4ff;
}
.lead-masked {
  color: #5a6080;
  font-family: monospace;
  font-size: 0.8rem;
}
.lead-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lead-status--NEW {
  background: #4c5bfe22;
  color: #8090ff;
  border: 1px solid #4c5bfe44;
}
.lead-status--CONTACTED {
  background: #f48c0622;
  color: #f48c06;
  border: 1px solid #f48c0644;
}
.lead-status--CONVERTED {
  background: #2ecc7122;
  color: #2ecc71;
  border: 1px solid #2ecc7144;
}
.lead-status--DISQUALIFIED {
  background: #6c757d22;
  color: #6c757d;
  border: 1px solid #6c757d44;
}
.lead-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.lead-action-btn {
  background: transparent;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.lead-action-btn:hover {
  background: #2a2d3e;
  color: #c8cde0;
}
.lead-action-btn--contact:hover {
  border-color: #f48c06;
  color: #f48c06;
  background: #f48c0615;
}
.lead-action-btn--convert:hover {
  border-color: #2ecc71;
  color: #2ecc71;
  background: #2ecc7115;
}
.lead-action-btn--disq:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  background: #e74c3c15;
}
.lead-action-btn--detail:hover {
  border-color: #4c5bfe;
  color: #9aabff;
  background: #4c5bfe15;
}
.meta-leads__empty {
  text-align: center;
  padding: 3rem;
  color: #5a5f78;
}
.meta-leads__empty-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}
.meta-leads__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}
.pagination-btn {
  background: #141725;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pagination-btn:hover:not(:disabled) {
  border-color: #4c5bfe;
  color: #c0c7ff;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-btn--active {
  background: #4c5bfe;
  border-color: #4c5bfe;
  color: #fff;
}
.pagination-info {
  font-size: 0.78rem;
  color: #5a5f78;
  margin: 0 0.5rem;
}
.lead-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lead-drawer {
  width: 100%;
  max-width: 480px;
  background: #1a1d2e;
  border-left: 1px solid #2a2d3e;
  height: 100%;
  overflow-y: auto;
  padding: 2rem;
  animation: slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.lead-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lead-drawer__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e0e4ff;
}
.lead-drawer__close {
  background: transparent;
  border: none;
  color: #8a8fa8;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.lead-drawer__close:hover {
  color: #e0e4ff;
}
.lead-drawer__section {
  background: #141725;
  border: 1px solid #2a2d3e;
  border-radius: 10px;
  padding: 1rem;
}
.lead-drawer__section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6080;
  margin-bottom: 0.75rem;
}
.lead-drawer__field {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid #1f2235;
  font-size: 0.83rem;
}
.lead-drawer__field:last-child {
  border-bottom: none;
}
.lead-drawer__field-label {
  color: #6a7090;
}
.lead-drawer__field-value {
  color: #c8cde0;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}
.lead-drawer__status-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lead-drawer__notes {
  width: 100%;
  background: #0f1117;
  border: 1px solid #2a2d3e;
  color: #c8cde0;
  padding: 0.6rem;
  border-radius: 8px;
  font-size: 0.83rem;
  resize: vertical;
  min-height: 80px;
}
.lead-drawer__notes:focus {
  outline: none;
  border-color: #4c5bfe;
}
.lead-drawer__save-btn {
  width: 100%;
  padding: 0.75rem;
  background:
    linear-gradient(
      135deg,
      #4c5bfe,
      #7b68ee);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.lead-drawer__save-btn:hover {
  opacity: 0.9;
}
.lead-drawer__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.meta-leads__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 0.75rem;
  color: #5a5f78;
}
.spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid #2a2d3e;
  border-top-color: #4c5bfe;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* src/pages/Marketing/Meta/MetaPixelConfig.css */
.meta-pixel {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  background: #0f1117;
}
.meta-pixel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meta-pixel__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f0f0f0;
}
.meta-pixel__subtitle {
  font-size: 0.85rem;
  color: #5a5f78;
  margin-top: 0.25rem;
}
.pixel-card {
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 1.5rem;
}
.pixel-card__title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6080;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pixel-selector {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
}
.pixel-selector label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #8a8fa8;
}
.pixel-selector select {
  background: #0f1117;
  border: 1px solid #2a2d3e;
  color: #c8cde0;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.pixel-selector select:focus {
  outline: none;
  border-color: #4c5bfe;
}
.pixel-sync-btn {
  padding: 0.55rem 1.2rem;
  background: transparent;
  border: 1px solid #4c5bfe;
  color: #8090ff;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.pixel-sync-btn:hover {
  background: #4c5bfe22;
}
.pixel-sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pixel-status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: #6a7090;
}
.pixel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  animation: pulse-dot 2s ease-in-out infinite;
}
.pixel-dot--inactive {
  background: #6c757d;
  animation: none;
}
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 #2ecc7155;
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 5px #2ecc7100;
  }
}
.pixel-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.65rem;
}
.pixel-event-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #0f1117;
  border: 1px solid #2a2d3e;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.pixel-event-item:hover {
  border-color: #4c5bfe;
}
.pixel-event-item--checked {
  border-color: #4c5bfe44;
  background: #4c5bfe11;
}
.pixel-event-item input[type=checkbox] {
  accent-color: #4c5bfe;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.pixel-event-name {
  font-size: 0.82rem;
  color: #c8cde0;
  font-weight: 500;
}
.pixel-event-desc {
  font-size: 0.7rem;
  color: #5a5f78;
}
.pixel-snippet-wrap {
  position: relative;
}
.pixel-snippet-code {
  width: 100%;
  background: #0a0c14;
  border: 1px solid #2a2d3e;
  border-radius: 10px;
  padding: 1rem;
  font-family:
    "JetBrains Mono",
    "Fira Code",
    monospace;
  font-size: 0.72rem;
  color: #9ab4c0;
  resize: none;
  min-height: 180px;
  line-height: 1.6;
}
.pixel-snippet-copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.35rem 0.85rem;
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.pixel-snippet-copy:hover {
  border-color: #4c5bfe;
  color: #c0c7ff;
}
.pixel-snippet-copy--done {
  border-color: #2ecc71;
  color: #2ecc71;
}
.pixel-snippet-hint {
  font-size: 0.75rem;
  color: #5a5f78;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.pixel-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 1rem 1.5rem;
}
.pixel-save-msg {
  font-size: 0.82rem;
  color: #5a5f78;
  flex: 1;
}
.pixel-save-btn {
  padding: 0.6rem 1.5rem;
  background:
    linear-gradient(
      135deg,
      #4c5bfe,
      #7b68ee);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pixel-save-btn:hover {
  opacity: 0.9;
}
.pixel-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pixel-save-success {
  color: #2ecc71;
  font-size: 0.82rem;
  font-weight: 600;
}
.pixel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 0.75rem;
  color: #5a5f78;
}

/* src/pages/Marketing/Meta/MetaCustomAudiences.css */
.meta-audiences {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  background: #0f1117;
}
.meta-audiences__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.meta-audiences__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f0f0f0;
}
.meta-audiences__subtitle {
  font-size: 0.85rem;
  color: #5a5f78;
  margin-top: 0.25rem;
}
.meta-audiences__actions {
  display: flex;
  gap: 0.75rem;
}
.aud-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 9px;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.aud-btn--primary {
  background:
    linear-gradient(
      135deg,
      #4c5bfe,
      #7b68ee);
  color: #fff;
  border-color: #4c5bfe;
}
.aud-btn--primary:hover {
  opacity: 0.9;
}
.aud-btn--outline {
  background: transparent;
  border-color: #2a2d3e;
  color: #8a8fa8;
}
.aud-btn--outline:hover {
  border-color: #4c5bfe;
  color: #c0c7ff;
}
.aud-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.aud-type-tabs {
  display: flex;
  gap: 0.4rem;
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}
.aud-tab {
  background: transparent;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.aud-tab:hover {
  border-color: #7b68ee;
  color: #c0c7ff;
}
.aud-tab--active {
  background: #7b68ee;
  border-color: #7b68ee;
  color: #fff;
}
.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}
.aud-card {
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color 0.2s, transform 0.2s;
}
.aud-card:hover {
  border-color: #4c5bfe;
  transform: translateY(-2px);
}
.aud-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.aud-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e0e4ff;
  word-break: break-word;
}
.aud-card__subtype {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.aud-card__subtype--CUSTOM {
  background: #4c5bfe22;
  color: #8090ff;
  border: 1px solid #4c5bfe44;
}
.aud-card__subtype--LOOKALIKE {
  background: #7b68ee22;
  color: #b8a8ff;
  border: 1px solid #7b68ee44;
}
.aud-card__subtype--WEBSITE {
  background: #e85d0422;
  color: #f48c06;
  border: 1px solid #e85d0444;
}
.aud-card__subtype--ENGAGEMENT {
  background: #2ecc7122;
  color: #2ecc71;
  border: 1px solid #2ecc7144;
}
.aud-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.aud-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.aud-meta-item__label {
  font-size: 0.68rem;
  color: #5a5f78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aud-meta-item__value {
  font-size: 0.82rem;
  color: #c8cde0;
  font-weight: 600;
}
.aud-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
}
.aud-status--READY {
  background: #2ecc7122;
  color: #2ecc71;
}
.aud-status--PROCESSING {
  background: #f48c0622;
  color: #f48c06;
}
.aud-status--FAILED {
  background: #e74c3c22;
  color: #e74c3c;
}
.aud-status--DELETED {
  background: #6c757d22;
  color: #6c757d;
}
.aud-card__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.aud-action-btn {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
}
.aud-action-btn:hover {
  background: #2a2d3e;
  color: #c8cde0;
}
.aud-action-btn--delete:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  background: #e74c3c15;
}
.aud-action-btn--lookalike:hover {
  border-color: #7b68ee;
  color: #b8a8ff;
  background: #7b68ee15;
}
.aud-empty {
  text-align: center;
  padding: 3rem;
  color: #5a5f78;
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
}
.aud-empty-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}
.aud-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.aud-modal {
  background: #1a1d2e;
  border: 1px solid #2a2d3e;
  border-radius: 18px;
  padding: 2rem;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.aud-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aud-modal__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e0e4ff;
}
.aud-modal__close {
  background: transparent;
  border: none;
  color: #8a8fa8;
  font-size: 1.4rem;
  cursor: pointer;
  transition: color 0.15s;
}
.aud-modal__close:hover {
  color: #e0e4ff;
}
.aud-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.aud-modal__label {
  font-size: 0.8rem;
  color: #8a8fa8;
  font-weight: 500;
}
.aud-modal__input,
.aud-modal__select,
.aud-modal__textarea {
  background: #0f1117;
  border: 1px solid #2a2d3e;
  color: #c8cde0;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
}
.aud-modal__input:focus,
.aud-modal__select:focus,
.aud-modal__textarea:focus {
  outline: none;
  border-color: #4c5bfe;
}
.aud-modal__textarea {
  resize: vertical;
  min-height: 70px;
}
.aud-modal__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.aud-modal__cancel {
  padding: 0.55rem 1.2rem;
  background: transparent;
  border: 1px solid #2a2d3e;
  color: #8a8fa8;
  border-radius: 9px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.aud-modal__cancel:hover {
  border-color: #4a4d5e;
  color: #c8cde0;
}
.aud-modal__submit {
  padding: 0.55rem 1.4rem;
  background:
    linear-gradient(
      135deg,
      #4c5bfe,
      #7b68ee);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.aud-modal__submit:hover {
  opacity: 0.9;
}
.aud-modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.aud-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 0.75rem;
  color: #5a5f78;
}
.spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid #2a2d3e;
  border-top-color: #4c5bfe;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* src/pages/Marketing/Meta/MetaWebhookMonitor.css */
.wh-monitor {
  padding: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  color: #e2e8f0;
  min-height: 100vh;
}
.wh-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.wh-title {
  font-size: 1.75rem;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      #60a5fa,
      #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.25rem;
}
.wh-subtitle {
  color: #94a3b8;
  margin: 0;
  font-size: 0.875rem;
}
.wh-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.wh-last-refresh {
  font-size: 0.75rem;
  color: #64748b;
}
.wh-btn-refresh {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}
.wh-btn-refresh:hover {
  background: rgba(96, 165, 250, 0.25);
  transform: translateY(-1px);
}
.wh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.wh-kpi {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.2s;
}
.wh-kpi:hover {
  transform: translateY(-2px);
}
.wh-kpi.success {
  border-color: rgba(34, 197, 94, 0.3);
}
.wh-kpi.warning {
  border-color: rgba(234, 179, 8, 0.3);
}
.wh-kpi.danger {
  border-color: rgba(239, 68, 68, 0.3);
}
.wh-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1;
}
.wh-kpi.success .wh-kpi-value {
  color: #4ade80;
}
.wh-kpi.warning .wh-kpi-value {
  color: #facc15;
}
.wh-kpi.danger .wh-kpi-value {
  color: #f87171;
}
.wh-kpi-label {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}
.wh-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.wh-filter-btn {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.25);
  color: #94a3b8;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.wh-filter-btn:hover {
  color: #e2e8f0;
  border-color: #475569;
}
.wh-filter-btn.active {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  color: #a5b4fc;
  font-weight: 600;
}
.wh-filter-auto {
  margin-left: auto;
  font-size: 0.75rem;
  color: #475569;
  font-style: italic;
}
.wh-table-wrap {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 12px;
  overflow: hidden;
  min-height: 300px;
}
.wh-loading,
.wh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  gap: 0.75rem;
  color: #475569;
}
.wh-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.wh-empty-icon {
  font-size: 2.5rem;
}
.wh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.wh-table thead th {
  background: rgba(30, 41, 59, 0.9);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}
.wh-row {
  border-bottom: 1px solid rgba(100, 116, 139, 0.1);
  cursor: pointer;
  transition: background 0.15s;
}
.wh-row:hover {
  background: rgba(99, 102, 241, 0.06);
}
.wh-row.expanded {
  background: rgba(99, 102, 241, 0.08);
}
.wh-row.has-error {
  border-left: 3px solid #ef4444;
}
.wh-row td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}
.wh-event-id {
  font-family: "Fira Code", monospace;
  font-size: 0.8rem;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.6);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.wh-object-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
}
.wh-badge {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.wh-badge.ok {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}
.wh-badge.pending {
  background: rgba(234, 179, 8, 0.1);
  color: #facc15;
}
.wh-badge.error {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
.wh-ts {
  color: #64748b;
  font-size: 0.8rem;
}
.wh-btn-replay {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: all 0.2s;
}
.wh-btn-replay:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.25);
  transform: translateY(-1px);
}
.wh-btn-replay:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wh-btn-expand {
  background: transparent;
  border: 1px solid rgba(100, 116, 139, 0.25);
  color: #64748b;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.wh-btn-expand:hover {
  color: #e2e8f0;
}
.wh-detail-row td {
  padding: 0 1rem 1rem;
}
.wh-detail {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(100, 116, 139, 0.15);
  border-radius: 8px;
  padding: 1rem;
}
.wh-error-msg {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.wh-payload-details summary {
  color: #64748b;
  cursor: pointer;
  font-size: 0.8rem;
  user-select: none;
}
.wh-payload-pre {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 6px;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
}
.wh-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: #64748b;
}
.wh-pagination button {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(100, 116, 139, 0.25);
  color: #94a3b8;
  border-radius: 8px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wh-pagination button:hover:not(:disabled) {
  color: #e2e8f0;
  border-color: #475569;
}
.wh-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* src/pages/Marketing/Meta/MetaLeadForms.css */
.lf-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  color: #e2e8f0;
}
.lf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.lf-title {
  font-size: 1.75rem;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      #60a5fa,
      #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.25rem;
}
.lf-subtitle {
  color: #94a3b8;
  margin: 0;
  font-size: 0.875rem;
}
.lf-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.lf-account-select {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(100, 116, 139, 0.3);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.lf-account-select:focus {
  outline: none;
  border-color: #60a5fa;
}
.lf-btn-sync-all {
  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #6366f1);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.lf-btn-sync-all:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.lf-btn-sync-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.lf-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.lf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}
.lf-card-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}
.lf-count {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-radius: 20px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.lf-loading,
.lf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 0.75rem;
  color: #475569;
  padding: 2rem;
  text-align: center;
}
.lf-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: lf-spin 0.8s linear infinite;
  margin-bottom: 0.5rem;
}
@keyframes lf-spin {
  to {
    transform: rotate(360deg);
  }
}
.lf-empty-icon {
  font-size: 2.5rem;
}
.lf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.lf-table thead th {
  background: rgba(30, 41, 59, 0.9);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}
.lf-row {
  border-bottom: 1px solid rgba(100, 116, 139, 0.08);
  transition: background 0.15s;
}
.lf-row:hover {
  background: rgba(99, 102, 241, 0.05);
}
.lf-row td {
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
}
.lf-form-name {
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0.15rem;
}
.lf-form-id {
  font-size: 0.73rem;
  color: #475569;
  font-family: "Fira Code", monospace;
}
.lf-status-badge {
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.lf-status-badge.active {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}
.lf-status-badge.archived {
  background: rgba(234, 179, 8, 0.1);
  color: #facc15;
}
.lf-status-badge.deleted {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
.lf-leads-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: #60a5fa;
}
.lf-sync-date {
  color: #64748b;
  font-size: 0.82rem;
}
.lf-btn-sync {
  background: rgba(96, 165, 250, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.lf-btn-sync:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.2);
  transform: translateY(-1px);
}
.lf-btn-sync:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lf-webhook-panel {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 14px;
  padding: 1.75rem;
}
.lf-webhook-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.lf-webhook-icon {
  font-size: 2rem;
  background: rgba(99, 102, 241, 0.15);
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lf-webhook-header h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2e8f0;
}
.lf-webhook-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
}
.lf-webhook-url-row {
  margin-bottom: 1.25rem;
}
.lf-webhook-url-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.lf-webhook-url-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  flex-wrap: wrap;
}
.lf-webhook-url-text {
  flex: 1;
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 0.8rem;
  color: #a5b4fc;
  word-break: break-all;
}
.lf-btn-copy {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.lf-btn-copy:hover {
  background: rgba(99, 102, 241, 0.25);
}
.lf-btn-copy.copied {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}
.lf-webhook-steps {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.lf-webhook-steps h4 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #94a3b8;
  font-weight: 600;
}
.lf-webhook-steps ol {
  margin: 0;
  padding-left: 1.25rem;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.9;
}
.lf-webhook-steps ol strong {
  color: #94a3b8;
}
.lf-webhook-steps ol code {
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: "Fira Code", monospace;
  font-size: 0.8rem;
}
.lf-webhook-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #4ade80;
}
.lf-webhook-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
}
.lf-webhook-dot.pulse {
  animation: lf-pulse 2s ease-in-out infinite;
}
@keyframes lf-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
  }
}

/* src/pages/Marketing/MarketingDashboard.css */
.md-page {
  padding: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--font-primary);
  color: var(--color-text);
}
.md-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.md-title {
  font-size: 1.75rem;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-accent-dark),
      #0ee88c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.25rem;
}
.md-subtitle {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 0.875rem;
}
.md-period-tabs {
  display: flex;
  gap: 0.25rem;
}
.md-period-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 7px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.2s;
}
.md-period-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-3);
}
.md-period-btn.active {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}
.md-demo-banner {
  background: var(--color-warning-bg);
  border: 1px solid rgba(255, 179, 71, 0.25);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  color: var(--color-warning);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.md-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  padding: 4rem 0;
  color: var(--color-text-secondary);
}
.md-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--color-accent-glow);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: md-spin 0.8s linear infinite;
}
@keyframes md-spin {
  to {
    transform: rotate(360deg);
  }
}
.md-total-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-accent);
  border-radius: 14px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  justify-content: space-around;
  position: relative;
  overflow: hidden;
}
.md-total-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      var(--color-accent-glow),
      transparent 60%);
  pointer-events: none;
}
.md-total-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  position: relative;
}
.md-total-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.md-total-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.md-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .md-platforms {
    grid-template-columns: 1fr;
  }
}
.md-platform-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform 0.2s, border-color 0.2s;
}
.md-platform-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-accent);
}
.md-meta {
  border-left: 3px solid #1877f2;
}
.md-google {
  border-left: 3px solid #4285F4;
}
.md-platform-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.md-platform-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.md-badge-meta,
.md-badge-google {
  background: transparent;
}
.md-platform-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.md-demo-tag {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: auto;
  border: 1px solid rgba(255, 179, 71, 0.2);
}
.md-platform-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.75rem;
}
.md-pkpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.md-pkpi-v {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}
.md-pkpi-l {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.md-chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
}
.md-chart-card h3 {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* src/pages/Marketing/Google/GoogleConnect.css */
.gc-page {
  padding: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  color: #e2e8f0;
}
.gc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.gc-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gc-google-icon {
  background: white;
  border-radius: 12px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.gc-title {
  font-size: 1.75rem;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.2rem;
}
.gc-subtitle {
  color: #64748b;
  margin: 0;
  font-size: 0.875rem;
}
.gc-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #64748b;
  padding: 3rem 0;
  justify-content: center;
}
.gc-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(66, 133, 244, 0.2);
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gc-spin 0.8s linear infinite;
}
.gc-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: gc-spin 0.8s linear infinite;
}
@keyframes gc-spin {
  to {
    transform: rotate(360deg);
  }
}
.gc-setup-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(66, 133, 244, 0.25);
  border-radius: 14px;
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.gc-setup-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gc-setup-icon {
  font-size: 1.75rem;
}
.gc-setup-header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.gc-setup-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
}
.gc-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.gc-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.gc-step-num {
  width: 26px;
  height: 26px;
  background: rgba(66, 133, 244, 0.15);
  color: #60a5fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.gc-step strong {
  color: #e2e8f0;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.25rem;
}
.gc-step p {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.6;
}
.gc-step a {
  color: #60a5fa;
  text-decoration: none;
}
.gc-step a:hover {
  text-decoration: underline;
}
.gc-redirect-uri {
  display: block;
  margin-top: 0.4rem;
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-family: "Fira Code", monospace;
  font-size: 0.78rem;
  word-break: break-all;
}
.gc-env-block {
  margin-top: 0.4rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: "Fira Code", monospace;
  white-space: pre;
  overflow-x: auto;
}
.gc-setup-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}
.gc-check {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: "Fira Code", monospace;
}
.gc-check.ok {
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
}
.gc-check.missing {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
}
.gc-connect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 14px;
  padding: 2rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.gc-btn-connect {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #1a1a2e;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  min-width: 200px;
}
.gc-btn-connect:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.3);
}
.gc-btn-connect:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.gc-connect-hint {
  color: #475569;
  font-size: 0.8rem;
  margin: 0;
}
.gc-connections-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 14px;
  padding: 1.5rem;
}
.gc-connections-card h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.gc-connections-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gc-conn-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.15);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}
.gc-conn-avatar {
  width: 42px;
  height: 42px;
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
  flex-shrink: 0;
}
.gc-conn-info {
  flex: 1;
  min-width: 0;
}
.gc-conn-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: 0.9rem;
}
.gc-conn-email {
  color: #64748b;
  font-size: 0.8rem;
}
.gc-conn-accounts {
  color: #475569;
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.gc-status-badge {
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.gc-status-badge.active {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}
.gc-status-badge.inactive {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
.gc-conn-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gc-btn-sync {
  background: rgba(66, 133, 244, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(66, 133, 244, 0.3);
  border-radius: 7px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.gc-btn-sync:hover {
  background: rgba(66, 133, 244, 0.2);
}
.gc-btn-disconnect {
  background: transparent;
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.25);
  border-radius: 7px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.gc-btn-disconnect:hover {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

/* src/pages/Marketing/Google/GoogleDashboard.css */
.gd-page {
  padding: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  color: #e2e8f0;
}
.gd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.gd-title {
  display: flex;
  align-items: center;
  font-size: 1.65rem;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.25rem;
}
.gd-demo-badge {
  display: inline-block;
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 6px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.gd-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.gd-select {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(100, 116, 139, 0.3);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}
.gd-period-tabs {
  display: flex;
  gap: 0.25rem;
}
.gd-period-btn {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  color: #94a3b8;
  border-radius: 7px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.gd-period-btn:hover {
  color: #e2e8f0;
}
.gd-period-btn.active {
  background: rgba(66, 133, 244, 0.15);
  border-color: rgba(66, 133, 244, 0.4);
  color: #60a5fa;
  font-weight: 600;
}
.gd-btn-sync {
  background: rgba(66, 133, 244, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(66, 133, 244, 0.3);
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.gd-btn-sync:hover:not(:disabled) {
  background: rgba(66, 133, 244, 0.25);
}
.gd-btn-sync:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gd-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  padding: 4rem 0;
  color: #64748b;
}
.gd-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(66, 133, 244, 0.2);
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gd-spin 0.8s linear infinite;
}
@keyframes gd-spin {
  to {
    transform: rotate(360deg);
  }
}
.gd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gd-kpi {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid color-mix(in srgb, var(--kc, #64748b) 25%, transparent);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: transform 0.2s;
}
.gd-kpi:hover {
  transform: translateY(-2px);
}
.gd-kpi-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
}
.gd-kpi-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}
.gd-chart-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.gd-chart-card h3 {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #94a3b8;
}
.gd-campaigns-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 12px;
  overflow: hidden;
}
.gd-campaigns-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}
.gd-campaigns-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.gd-camp-count {
  background: rgba(66, 133, 244, 0.1);
  color: #60a5fa;
  border-radius: 20px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.gd-empty {
  padding: 2.5rem;
  text-align: center;
  color: #475569;
  font-size: 0.875rem;
}
.gd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.gd-table thead th {
  background: rgba(30, 41, 59, 0.9);
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.25rem;
  text-align: left;
}
.gd-table tbody tr {
  border-bottom: 1px solid rgba(100, 116, 139, 0.08);
  transition: background 0.15s;
}
.gd-table tbody tr:hover {
  background: rgba(66, 133, 244, 0.04);
}
.gd-table tbody td {
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
}
.gd-camp-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: 0.875rem;
}
.gd-demo-tag {
  background: rgba(234, 179, 8, 0.1);
  color: #facc15;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  margin-left: 0.5rem;
}
.gd-channel-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.gd-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
}
.gd-budget {
  color: #60a5fa;
  font-weight: 600;
}
.gd-strategy {
  color: #64748b;
  font-size: 0.8rem;
}

/* src/pages/Marketing/Google/GoogleCampaigns.css */
.gcampaigns-page {
  padding: 1.75rem 2rem;
}
.gcampaigns-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.gcampaigns-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  margin: 0;
}
.gcampaigns-demo-badge {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
  margin-left: .5rem;
}
.gcampaigns-header-right {
  display: flex;
  gap: .65rem;
  align-items: center;
  flex-wrap: wrap;
}
.gcampaigns-select {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .45rem .75rem;
  font-size: .85rem;
}
.gcampaigns-btn-sync {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .45rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s;
}
.gcampaigns-btn-sync:hover {
  border-color: #64748b;
  color: #e2e8f0;
}
.gcampaigns-btn-create {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
  transition: opacity .2s;
}
.gcampaigns-btn-create:hover {
  opacity: .9;
}
.gcampaigns-filters {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.gcampaigns-filter-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .35rem .85rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
}
.gcampaigns-filter-btn.active {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.gcampaigns-count {
  margin-left: auto;
  font-size: .8rem;
  color: #64748b;
}
.gcampaigns-loading {
  text-align: center;
  padding: 3rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.gcampaigns-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #334155;
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gspin .8s linear infinite;
  display: inline-block;
}
@keyframes gspin {
  to {
    transform: rotate(360deg);
  }
}
.gcampaigns-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #64748b;
}
.gcampaigns-empty p {
  margin: .75rem 0 1.25rem;
}
.gcampaigns-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gcampaigns-item {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color .2s;
  flex-wrap: wrap;
}
.gcampaigns-item:hover {
  border-color: #4285F4;
}
.gcampaigns-item-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.gcampaigns-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gcampaigns-item-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: .9rem;
}
.gcampaigns-item-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.gcampaigns-tag {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
}
.gcampaigns-tag--budget {
  color: #4ade80;
  border-color: rgba(74, 222, 128, .3);
}
.gcampaigns-tag--demo {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, .3);
}
.gcampaigns-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.gcampaigns-btn-toggle,
.gcampaigns-btn-edit,
.gcampaigns-btn-remove,
.gcampaigns-btn-adgroups {
  border: 1px solid #334155;
  background: #0f172a;
  color: #94a3b8;
  border-radius: 6px;
  padding: .35rem .8rem;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.gcampaigns-btn-toggle:hover,
.gcampaigns-btn-edit:hover,
.gcampaigns-btn-adgroups:hover {
  border-color: #64748b;
  color: #e2e8f0;
}
.gcampaigns-btn-toggle.pause:hover {
  border-color: #facc15;
  color: #facc15;
}
.gcampaigns-btn-toggle.enable:hover {
  border-color: #4ade80;
  color: #4ade80;
}
.gcampaigns-btn-remove:hover {
  border-color: #f87171;
  color: #f87171;
}
.gcampaigns-btn-adgroups:hover {
  border-color: #818cf8;
  color: #818cf8;
}
.gcampaigns-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.gcampaigns-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: min(580px, 95vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.gcampaigns-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #334155;
}
.gcampaigns-modal-header h2 {
  margin: 0;
  color: #e2e8f0;
  font-size: 1.05rem;
}
.gcampaigns-modal-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.gcampaigns-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.gcampaigns-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}
.gcampaigns-label {
  font-size: .8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gcampaigns-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.gcampaigns-input:focus {
  border-color: #4285F4;
}
.gcampaigns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.gcampaigns-btn-cancel {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.gcampaigns-btn-save {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.gcampaigns-btn-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* src/pages/Marketing/Google/GoogleAdGroups.css */
.gag-page {
  padding: 1.75rem 2rem;
}
.gag-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.gag-breadcrumb {
  font-size: .8rem;
  color: #64748b;
  margin-bottom: .35rem;
}
.gag-breadcrumb a {
  color: #818cf8;
  text-decoration: none;
}
.gag-breadcrumb a:hover {
  text-decoration: underline;
}
.gag-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.gag-demo-badge {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}
.gag-btn-create {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
}
.gag-loading {
  text-align: center;
  padding: 3rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.gag-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #334155;
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gspin .8s linear infinite;
  display: inline-block;
}
@keyframes gspin {
  to {
    transform: rotate(360deg);
  }
}
.gag-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #64748b;
}
.gag-empty p {
  margin: .75rem 0 1.25rem;
}
.gag-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gag-item {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.gag-item:hover {
  border-color: #4285F4;
}
.gag-item-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.gag-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gag-item-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: .9rem;
}
.gag-item-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.gag-tag {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
}
.gag-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.gag-btn-link {
  border: 1px solid #334155;
  background: #0f172a;
  color: #818cf8;
  border-radius: 6px;
  padding: .35rem .8rem;
  cursor: pointer;
  font-size: .8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all .2s;
}
.gag-btn-link:hover {
  border-color: #818cf8;
}
.gag-btn-toggle,
.gag-btn-edit,
.gag-btn-remove {
  border: 1px solid #334155;
  background: #0f172a;
  color: #94a3b8;
  border-radius: 6px;
  padding: .35rem .65rem;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s;
}
.gag-btn-toggle.pause:hover {
  border-color: #facc15;
  color: #facc15;
}
.gag-btn-toggle.enable:hover {
  border-color: #4ade80;
  color: #4ade80;
}
.gag-btn-remove:hover {
  border-color: #f87171;
  color: #f87171;
}
.gag-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.gag-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: min(520px, 95vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.gag-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #334155;
}
.gag-modal-header h2 {
  margin: 0;
  color: #e2e8f0;
  font-size: 1.05rem;
}
.gag-modal-header button {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.gag-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.gag-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}
.gag-label {
  font-size: .8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gag-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.gag-input:focus {
  border-color: #4285F4;
}
.gag-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
}
.gag-btn-cancel {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.gag-btn-save {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.gag-btn-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* src/pages/Marketing/Google/GoogleKeywords.css */
.gkw-page {
  padding: 1.75rem 2rem;
}
.gkw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.gkw-breadcrumb {
  font-size: .8rem;
  color: #64748b;
  margin-bottom: .35rem;
}
.gkw-breadcrumb a {
  color: #818cf8;
  text-decoration: none;
}
.gkw-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.gkw-demo-badge {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
}
.gkw-btn-add {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
}
.gkw-filters {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.gkw-filter-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .35rem .85rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
}
.gkw-filter-btn.active {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.gkw-count {
  margin-left: auto;
  font-size: .8rem;
  color: #64748b;
}
.gkw-loading {
  text-align: center;
  padding: 3rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.gkw-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #334155;
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gspin .8s linear infinite;
  display: inline-block;
}
@keyframes gspin {
  to {
    transform: rotate(360deg);
  }
}
.gkw-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #64748b;
}
.gkw-empty p {
  margin: .75rem 0 1.25rem;
}
.gkw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}
.gkw-table thead th {
  background: #1e293b;
  color: #64748b;
  font-size: .75rem;
  text-transform: uppercase;
  padding: .65rem 1rem;
  text-align: left;
  font-weight: 600;
}
.gkw-table thead th:first-child {
  border-radius: 8px 0 0 8px;
}
.gkw-table thead th:last-child {
  border-radius: 0 8px 8px 0;
}
.gkw-table tbody tr {
  background: #1e293b;
}
.gkw-table tbody tr:hover {
  background: #253347;
}
.gkw-table td {
  padding: .7rem 1rem;
  color: #e2e8f0;
  font-size: .875rem;
  border-top: 1px solid #334155;
  border-bottom: 1px solid #334155;
}
.gkw-table td:first-child {
  border-left: 1px solid #334155;
  border-radius: 8px 0 0 8px;
}
.gkw-table td:last-child {
  border-right: 1px solid #334155;
  border-radius: 0 8px 8px 0;
}
.gkw-kw-text {
  font-family: monospace;
  color: #a5f3fc;
}
.gkw-match-prefix,
.gkw-match-suffix {
  color: #64748b;
}
.gkw-match-badge {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
}
.gkw-match-broad {
  background: rgba(99, 102, 241, .15);
  color: #818cf8;
}
.gkw-match-phrase {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
}
.gkw-match-exact {
  background: rgba(74, 222, 128, .15);
  color: #4ade80;
}
.gkw-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .4rem;
}
.gkw-qs-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100px;
}
.gkw-qs-fill {
  height: 6px;
  border-radius: 3px;
  transition: width .3s;
}
.gkw-qs-bar span {
  font-size: .75rem;
  color: #94a3b8;
}
.gkw-btn-remove {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 6px;
  padding: .3rem .65rem;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
}
.gkw-btn-remove:hover {
  border-color: #f87171;
  color: #f87171;
}
.gkw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.gkw-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: min(560px, 95vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.gkw-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #334155;
}
.gkw-modal-header h2 {
  margin: 0;
  color: #e2e8f0;
  font-size: 1.05rem;
}
.gkw-modal-header button {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.gkw-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.gkw-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}
.gkw-label {
  font-size: .8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gkw-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.gkw-input:focus {
  border-color: #4285F4;
}
.gkw-textarea {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .55rem .85rem;
  font-size: .85rem;
  font-family: monospace;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.gkw-textarea:focus {
  border-color: #4285F4;
}
.gkw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.gkw-bulk-count {
  font-size: .8rem;
  color: #818cf8;
  margin: 0;
}
.gkw-btn-cancel {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.gkw-btn-save {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.gkw-btn-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* src/pages/Marketing/Google/GoogleRSABuilder.css */
.grsa-page {
  padding: 1.75rem 2rem;
}
.grsa-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.grsa-breadcrumb {
  font-size: .8rem;
  color: #64748b;
  margin-bottom: .35rem;
}
.grsa-breadcrumb a {
  color: #818cf8;
  text-decoration: none;
}
.grsa-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.grsa-demo-badge {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
}
.grsa-btn-create {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
}
.grsa-loading {
  text-align: center;
  padding: 3rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.grsa-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #334155;
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gspin .8s linear infinite;
  display: inline-block;
}
@keyframes gspin {
  to {
    transform: rotate(360deg);
  }
}
.grsa-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #64748b;
}
.grsa-empty p {
  margin: .75rem 0 1.25rem;
}
.grsa-ads-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.grsa-ad-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.grsa-ad-card:hover {
  border-color: #4285F4;
}
.grsa-preview {
  padding: 1rem 1.25rem;
  background: #0f172a;
  border-bottom: 1px solid #334155;
}
.grsa-preview-url {
  font-size: .75rem;
  color: #4ade80;
  margin-bottom: .35rem;
}
.grsa-preview-headlines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: .4rem;
}
.grsa-hl {
  color: #4285F4;
  font-size: .95rem;
  font-weight: 600;
}
.grsa-hl-sep {
  color: #64748b;
  font-size: .85rem;
}
.grsa-preview-descs {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.grsa-desc {
  font-size: .8rem;
  color: #94a3b8;
}
.grsa-ad-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 1.25rem;
}
.grsa-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .4rem;
  vertical-align: middle;
}
.grsa-ad-actions {
  display: flex;
  gap: .5rem;
}
.grsa-btn-toggle,
.grsa-btn-edit,
.grsa-btn-remove {
  border: 1px solid #334155;
  background: #0f172a;
  color: #94a3b8;
  border-radius: 6px;
  padding: .3rem .65rem;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s;
}
.grsa-btn-toggle.pause:hover {
  border-color: #facc15;
  color: #facc15;
}
.grsa-btn-toggle.enable:hover {
  border-color: #4ade80;
  color: #4ade80;
}
.grsa-btn-remove:hover {
  border-color: #f87171;
  color: #f87171;
}
.grsa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  overflow-y: auto;
  padding: 2rem 1rem;
}
.grsa-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: min(680px, 95vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.grsa-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #334155;
  position: sticky;
  top: 0;
  background: #1e293b;
  z-index: 1;
}
.grsa-modal-header h2 {
  margin: 0;
  color: #e2e8f0;
  font-size: 1.05rem;
}
.grsa-modal-header button {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.grsa-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.grsa-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  position: sticky;
  bottom: 0;
  background: #1e293b;
}
.grsa-label {
  font-size: .8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.grsa-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.grsa-input:focus {
  border-color: #4285F4;
}
.grsa-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: .75rem;
}
.grsa-section-label {
  font-size: .8rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.grsa-hint {
  font-size: .75rem;
  color: #475569;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.grsa-hl-row,
.grsa-desc-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.grsa-hl-num {
  min-width: 1.2rem;
  text-align: right;
  font-size: .75rem;
  color: #64748b;
}
.grsa-char-count {
  font-size: .73rem;
  color: #64748b;
  min-width: 2.5rem;
  text-align: right;
}
.grsa-char-count.warn {
  color: #fbbf24;
}
.grsa-pin-select {
  flex-shrink: 0;
  width: auto;
  padding: .4rem .6rem;
  font-size: .78rem;
}
.grsa-btn-rm-field {
  background: #0f172a;
  border: 1px solid #334155;
  color: #f87171;
  border-radius: 6px;
  padding: .3rem .55rem;
  cursor: pointer;
  font-size: .8rem;
}
.grsa-btn-add-field {
  background: transparent;
  border: 1px dashed #334155;
  color: #64748b;
  border-radius: 8px;
  padding: .4rem .85rem;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
  width: 100%;
  margin-top: .25rem;
}
.grsa-btn-add-field:hover {
  border-color: #4285F4;
  color: #4285F4;
}
.grsa-btn-cancel {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.grsa-btn-save {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.grsa-btn-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* src/pages/Marketing/Google/GoogleConversions.css */
.gconv-page {
  padding: 1.75rem 2rem;
}
.gconv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.gconv-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.gconv-subtitle {
  font-size: .85rem;
  color: #64748b;
  margin: .25rem 0 0;
}
.gconv-demo-badge {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
}
.gconv-header-right {
  display: flex;
  gap: .65rem;
  align-items: center;
  flex-wrap: wrap;
}
.gconv-select {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .45rem .75rem;
  font-size: .85rem;
}
.gconv-btn-sync {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .45rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s;
}
.gconv-btn-sync:hover {
  border-color: #64748b;
  color: #e2e8f0;
}
.gconv-btn-create {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
}
.gconv-loading {
  text-align: center;
  padding: 3rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.gconv-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #334155;
  border-top-color: #4285F4;
  border-radius: 50%;
  animation: gspin .8s linear infinite;
  display: inline-block;
}
@keyframes gspin {
  to {
    transform: rotate(360deg);
  }
}
.gconv-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #64748b;
}
.gconv-empty p {
  margin: .75rem 0 1.25rem;
}
.gconv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.gconv-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  transition: all .2s;
}
.gconv-card:hover {
  border-color: #4285F4;
  transform: translateY(-1px);
}
.gconv-card-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
}
.gconv-cat-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.gconv-card-name {
  font-weight: 600;
  color: #e2e8f0;
  font-size: .9rem;
  line-height: 1.3;
}
.gconv-card-category {
  font-size: .75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .2rem;
}
.gconv-status {
  font-size: .75rem;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.gconv-card-meta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.gconv-meta-item {
  display: flex;
  flex-direction: column;
}
.gconv-meta-label {
  font-size: .7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gconv-meta-value {
  font-size: .85rem;
  color: #e2e8f0;
  font-weight: 500;
  margin-top: .15rem;
}
.gconv-tag-hint {
  margin-top: .75rem;
  font-size: .75rem;
  color: #818cf8;
  border-top: 1px solid #334155;
  padding-top: .65rem;
}
.gconv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.gconv-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: min(560px, 95vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.gconv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #334155;
}
.gconv-modal-header h2 {
  margin: 0;
  color: #e2e8f0;
  font-size: 1.05rem;
}
.gconv-modal-header button {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.gconv-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.gconv-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #334155;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}
.gconv-label {
  font-size: .8rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gconv-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  padding: .55rem .85rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.gconv-input:focus {
  border-color: #4285F4;
}
.gconv-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: .75rem;
}
.gconv-help {
  background: rgba(66, 133, 244, .08);
  border: 1px solid rgba(66, 133, 244, .2);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .82rem;
  color: #93c5fd;
}
.gconv-code-block {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 1rem;
  font-size: .8rem;
  color: #a5f3fc;
  font-family: monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.gconv-btn-cancel {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.gconv-btn-save {
  background:
    linear-gradient(
      135deg,
      #4285F4,
      #34A853);
  color: #fff;
  border: none;
  padding: .5rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.gconv-btn-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* src/pages/Marketing/SocialPublisher/SocialPublisherProfiles.css */
.spp-page {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100%;
  background: var(--color-bg);
}
.spp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.spp-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.spp-header__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(252, 176, 69, .15),
      rgba(253, 29, 29, .15),
      rgba(131, 58, 180, .15));
  border: 1px solid rgba(131, 58, 180, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.spp-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.spp-header__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}
.spp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-accent);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.spp-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.spp-btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 255, 197, 0.35);
}
[data-theme=light] .spp-btn-primary {
  color: #fff;
}
[data-theme=light] .spp-btn-primary:not(:disabled):hover {
  box-shadow: 0 4px 16px rgba(26, 107, 232, 0.35);
}
.spp-btn-primary .spp-spinner {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: #000;
}
[data-theme=light] .spp-btn-primary .spp-spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
}
.spp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.spp-btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.spp-icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
}
.spp-icon-btn--danger:hover {
  border-color: #f87171;
  color: #f87171;
  background: rgba(239, 68, 68, .06);
}
.spp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.spp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .2s ease;
}
.spp-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
  transform: translateY(-2px);
}
.spp-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.spp-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(252, 176, 69, .2),
      rgba(131, 58, 180, .2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.spp-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spp-card__avatar-icon {
  font-size: 22px;
}
.spp-card__info {
  flex: 1;
  min-width: 0;
}
.spp-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spp-card__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.spp-card__accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spp-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.spp-account-chip--ig {
  background: rgba(131, 58, 180, .12);
  color: #c084fc;
  border: 1px solid rgba(131, 58, 180, .2);
}
.spp-account-chip--fb {
  background: rgba(24, 119, 242, .12);
  color: #60a5fa;
  border: 1px solid rgba(24, 119, 242, .2);
}
.spp-account-chip--empty {
  background: rgba(148, 163, 184, .1);
  color: #64748b;
}
.spp-card__stats {
  display: flex;
  gap: 20px;
}
.spp-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.spp-stat__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}
.spp-stat__num--accent {
  color: var(--color-accent);
}
.spp-stat__label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.spp-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .2);
  border-radius: 9px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  margin-top: auto;
}
.spp-card__btn:hover {
  background: rgba(99, 102, 241, .15);
  border-color: var(--color-accent);
}
.spp-card--add {
  min-height: 200px;
  border-style: dashed;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 8px;
}
.spp-card--add:hover {
  background: rgba(99, 102, 241, .04);
  border-color: var(--color-accent);
}
.spp-card__add-icon {
  font-size: 28px;
  color: var(--color-text-muted);
}
.spp-card__add-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.spp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--color-text-muted);
  text-align: center;
}
.spp-empty__icon {
  font-size: 52px;
  opacity: .35;
}
.spp-empty__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.spp-empty__sub {
  font-size: 13px;
  max-width: 500px;
  line-height: 1.6;
}
.spp-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 40px;
  justify-content: center;
}
.spp-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spp-spin .8s linear infinite;
}
@keyframes spp-spin {
  to {
    transform: rotate(360deg);
  }
}
.spp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: spp-fade .2s ease;
}
@keyframes spp-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.spp-modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: spp-slide .25s ease;
}
@keyframes spp-slide {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.spp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}
.spp-modal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.spp-modal__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: all .15s;
}
.spp-modal__close:hover {
  border-color: #f87171;
  color: #f87171;
}
.spp-steps {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.spp-step {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
}
.spp-step__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all .2s;
}
.spp-step--active .spp-step__num {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
.spp-step--done .spp-step__num {
  border-color: #4ade80;
  background: rgba(74, 222, 128, .1);
  color: #4ade80;
}
.spp-step__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.spp-step--active .spp-step__label {
  color: var(--color-text);
  font-weight: 600;
}
.spp-step__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  margin: 0 8px;
}
.spp-step__line--done {
  background: var(--color-accent);
}
.spp-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.spp-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.spp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.spp-input,
.spp-select {
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  color: var(--color-text);
  font-size: 13px;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.spp-input:focus,
.spp-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}
.spp-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spp-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}
.spp-account-item:hover {
  border-color: var(--color-accent);
}
.spp-account-item--selected {
  border-color: var(--color-accent);
  background: rgba(99, 102, 241, .05);
}
.spp-account-item__check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all .15s;
}
.spp-account-item--selected .spp-account-item__check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.spp-account-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.spp-account-item__avatar--ig {
  background:
    linear-gradient(
      135deg,
      rgba(252, 176, 69, .15),
      rgba(131, 58, 180, .15));
  border: 1px solid rgba(131, 58, 180, .2);
}
.spp-account-item__avatar--fb {
  background: rgba(24, 119, 242, .1);
  border: 1px solid rgba(24, 119, 242, .2);
}
.spp-account-item__info {
  flex: 1;
  min-width: 0;
}
.spp-account-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spp-account-item__type {
  font-size: 11px;
  color: var(--color-text-muted);
}
@media (max-width: 600px) {
  .spp-page {
    padding: 16px;
  }
  .spp-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .spp-grid {
    grid-template-columns: 1fr;
  }
  .spp-modal {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* src/pages/Marketing/SocialPublisher/SocialPublisher.css */
.sp-page {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
  background: var(--color-bg);
}
.sp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sp-header__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-header__title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      #833ab4 0%,
      #fd1d1d 50%,
      #fcb045 100%);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}
.sp-header__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
}
.sp-btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-accent);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sp-btn-primary:hover {
  background: var(--color-accent-hover, var(--color-accent));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 255, 197, 0.35);
}
[data-theme=light] .sp-btn-primary {
  color: #fff;
}
[data-theme=light] .sp-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(26, 107, 232, 0.35);
}
.sp-btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-surface-raised, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sp-btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sp-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
}
.sp-tab {
  padding: 8px 18px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  bottom: -1px;
}
.sp-tab:hover {
  color: var(--color-text);
}
.sp-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}
.sp-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-filter-select {
  padding: 7px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sp-filter-select:focus {
  outline: none;
  border-color: var(--color-accent);
}
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sp-badge--draft {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}
.sp-badge--scheduled {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}
.sp-badge--dispatched {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}
.sp-badge--processing {
  background: rgba(251, 191, 36, 0.15);
  color: #f59e0b;
}
.sp-badge--published {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}
.sp-badge--failed {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.sp-badge--cancelled {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}
.sp-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.sp-calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-calendar-nav__btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}
.sp-calendar-nav__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sp-calendar-nav__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 160px;
  text-align: center;
}
.sp-calendar {
  background: var(--color-surface);
  border-radius: 14px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.sp-calendar__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-border);
}
.sp-calendar__weekday {
  padding: 10px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sp-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.sp-calendar__day {
  min-height: 100px;
  padding: 8px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  transition: background 0.15s;
}
.sp-calendar__day:nth-child(7n) {
  border-right: none;
}
.sp-calendar__day:hover {
  background: rgba(255, 255, 255, 0.02);
}
.sp-calendar__day--empty {
  opacity: 0.3;
}
.sp-calendar__day--today .sp-calendar__day-num {
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
}
.sp-calendar__day-num {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: 50%;
  margin-bottom: 4px;
}
.sp-calendar__posts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sp-calendar__post-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sp-calendar__post-chip:hover {
  opacity: 0.8;
}
.sp-calendar__post-chip--feed {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}
.sp-calendar__post-chip--story {
  background: rgba(131, 58, 180, 0.2);
  color: #c084fc;
}
.sp-calendar__post-chip--reel {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.sp-calendar__post-chip--carousel {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}
.sp-calendar__post-chip--published {
  opacity: 0.6;
}
.sp-calendar__post-chip--failed {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.sp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-post-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.15s ease;
}
.sp-post-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}
.sp-post-card__thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.sp-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-post-card__body {
  flex: 1;
  min-width: 0;
}
.sp-post-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.sp-post-card__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-post-card__error {
  font-size: 11px;
  color: #f87171;
  margin-top: 4px;
}
.sp-post-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}
.sp-icon-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sp-icon-btn--danger:hover {
  border-color: #f87171;
  color: #f87171;
}
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.sp-empty__icon {
  font-size: 48px;
  opacity: 0.4;
}
.sp-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.sp-empty__sub {
  font-size: 13px;
  text-align: center;
}
.sp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--color-text-muted);
  font-size: 14px;
  gap: 10px;
}
.sp-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: sp-spin 0.8s linear infinite;
}
@keyframes sp-spin {
  to {
    transform: rotate(360deg);
  }
}
.sp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: sp-fade-in 0.2s ease;
}
@keyframes sp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sp-modal {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sp-slide-up 0.25s ease;
}
@keyframes sp-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.sp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.sp-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
.sp-modal__close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s;
}
.sp-modal__close:hover {
  border-color: #f87171;
  color: #f87171;
}
.sp-steps {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg);
}
.sp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.sp-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}
.sp-step--active .sp-step__num {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
.sp-step--done .sp-step__num {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}
.sp-step__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.sp-step--active .sp-step__label {
  color: var(--color-text);
  font-weight: 600;
}
.sp-step__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  margin: 0 8px;
}
.sp-step__line--done {
  background: var(--color-accent);
}
.sp-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sp-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.sp-modal__footer-actions {
  display: flex;
  gap: 10px;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-input,
.sp-textarea,
.sp-select {
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  color: var(--color-text);
  font-size: 13px;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.sp-input:focus,
.sp-textarea:focus,
.sp-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.sp-textarea {
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
}
.sp-format-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sp-format-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.sp-format-btn:hover {
  border-color: var(--color-accent);
}
.sp-format-btn--active {
  border-color: var(--color-accent);
  background: rgba(99, 102, 241, 0.08);
}
.sp-format-btn__icon {
  font-size: 24px;
}
.sp-format-btn__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.sp-format-btn--active .sp-format-btn__label {
  color: var(--color-accent);
}
.sp-uploader {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--color-bg);
  position: relative;
}
.sp-uploader:hover,
.sp-uploader--drag-over {
  border-color: var(--color-accent);
  background: rgba(99, 102, 241, 0.04);
}
.sp-uploader__icon {
  font-size: 32px;
  opacity: 0.5;
}
.sp-uploader__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.sp-uploader__sub {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}
.sp-uploader input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.sp-media-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.sp-media-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.sp-media-preview img,
.sp-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-media-preview__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sp-media-preview__remove:hover {
  background: #ef4444;
}
.sp-media-preview__type {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.sp-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.sp-account-item:hover {
  border-color: var(--color-accent);
}
.sp-account-item--selected {
  border-color: var(--color-accent);
  background: rgba(99, 102, 241, 0.06);
}
.sp-account-item__check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.sp-account-item--selected .sp-account-item__check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-size: 11px;
}
.sp-account-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      #833ab4,
      #fd1d1d,
      #fcb045);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.sp-account-item__info {
  flex: 1;
  min-width: 0;
}
.sp-account-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.sp-account-item__type {
  font-size: 11px;
  color: var(--color-text-muted);
}
.sp-datetime-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-schedule-preview {
  padding: 12px 16px;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 9px;
  font-size: 13px;
  color: var(--color-accent);
  text-align: center;
  font-weight: 500;
}
@media (max-width: 768px) {
  .sp-page {
    padding: 16px;
  }
  .sp-header {
    flex-direction: column;
  }
  .sp-format-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-datetime-row {
    grid-template-columns: 1fr;
  }
  .sp-modal {
    max-height: 100vh;
    border-radius: 0;
  }
}
.sp-profile-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.sp-profile-bar__back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-profile-bar__back:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sp-profile-bar__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-profile-bar__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.sp-profile-bar__accounts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-profile-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sp-profile-bar__chip--ig {
  background: rgba(131, 58, 180, .12);
  color: #c084fc;
  border: 1px solid rgba(131, 58, 180, .18);
}
.sp-profile-bar__chip--fb {
  background: rgba(24, 119, 242, .1);
  color: #60a5fa;
  border: 1px solid rgba(24, 119, 242, .18);
}
.sp-publish-to {
  display: flex;
  gap: 8px;
}
.sp-publish-to-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.sp-publish-to-btn:hover {
  border-color: var(--color-accent);
}
.sp-publish-to-btn--active {
  border-color: var(--color-accent);
  background: rgba(99, 102, 241, .07);
  color: var(--color-accent);
}
.sp-publish-to-btn__icon {
  font-size: 20px;
}

/* src/pages/Marketing/MarketingLayout.css */
.marketing-layout {
  display: flex;
  height: 100%;
  min-height: calc(100vh - 60px);
  background: var(--color-bg);
}
.marketing-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 12px;
  overflow-y: auto;
}
.marketing-sidebar__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.marketing-sidebar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-accent-glow);
  color: var(--color-accent);
}
.marketing-sidebar__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.marketing-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.marketing-nav__section {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.marketing-nav__section-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 10px;
  background: var(--color-surface-2);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  transition: background 0.15s;
}
.marketing-nav__section-toggle:hover {
  background: var(--color-surface-3);
}
.marketing-nav__section--open .marketing-nav__section-toggle {
  border-radius: 10px 10px 0 0;
  border-bottom-color: var(--color-border);
  background: var(--color-surface-3);
}
.marketing-nav__section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  flex: 1;
}
.marketing-nav__chevron {
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.marketing-nav__section--open .marketing-nav__chevron {
  transform: rotate(180deg);
}
.marketing-nav__section-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.marketing-nav__section--open .marketing-nav__section-body {
  grid-template-rows: 1fr;
}
.marketing-nav__section-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  transition: padding 0.28s ease;
  background: var(--color-surface);
}
.marketing-nav__section--open .marketing-nav__section-inner {
  padding: 6px 0 4px;
}
.marketing-nav__icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.marketing-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  position: relative;
}
.marketing-nav__item:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.marketing-nav__item--active {
  background: var(--color-accent-glow);
  color: var(--color-accent);
}
.marketing-nav__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.marketing-nav__platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}
.marketing-nav__platform-badge--meta,
.marketing-nav__platform-badge--google {
  background: transparent;
}
.marketing-nav__soon {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-surface-3);
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--color-text-secondary);
}
.marketing-nav__soon-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-warning-bg);
  border: 1px solid rgba(255, 179, 71, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--color-warning);
}
.marketing-content {
  flex: 1;
  overflow: auto;
  background: var(--color-bg);
}
.marketing-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  gap: 16px;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 40px;
}
.marketing-coming-soon__icon {
  opacity: 0.3;
}
.marketing-coming-soon h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.marketing-coming-soon p {
  font-size: 14px;
  max-width: 320px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .marketing-layout {
    flex-direction: column;
  }
  .marketing-sidebar {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    padding: 12px 16px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .marketing-sidebar__header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    white-space: nowrap;
  }
  .marketing-nav {
    flex-direction: row;
  }
  .marketing-nav__section {
    flex-direction: row;
  }
  .marketing-nav__section-label {
    display: none;
  }
}

/* src/pages/Admin/AdminAutomacoes.css */
.automation-manager-root {
  display: flex;
  height: calc(100vh - 100px);
  max-width: 1600px;
  margin: 0 auto;
  gap: 2rem;
  padding: 2rem;
  font-family:
    "Outfit",
    "Inter",
    sans-serif;
  color: #f8fafc;
}
.automation-sidebar {
  width: 320px;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #4affc5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.new-profile-btn {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.3);
  color: #4affc5;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.new-profile-btn:hover {
  background: rgba(74, 255, 197, 0.2);
  box-shadow: 0 0 12px rgba(74, 255, 197, 0.15);
}
.profiles-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sidebar-loading,
.sidebar-empty {
  text-align: center;
  color: #64748b;
  font-style: italic;
  padding: 2rem 0;
  font-size: 0.9rem;
}
.profile-item-card {
  background: rgba(30, 41, 59, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-item-card:hover {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(74, 255, 197, 0.2);
}
.profile-item-card.active {
  background: rgba(74, 255, 197, 0.08);
  border-color: #4affc5;
  box-shadow: 0 0 12px rgba(74, 255, 197, 0.08);
}
.profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile-card-header strong {
  font-size: 0.95rem;
  color: #cbd5e1;
  transition: color 0.2s ease;
}
.profile-item-card.active .profile-card-header strong {
  color: #4affc5;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.on {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.status-dot.off {
  background: #64748b;
}
.profile-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.profile-url-tag {
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.profile-func-badge {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.automation-main-panel {
  flex: 1;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  padding: 2rem;
  position: relative;
}
.empty-panel-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.empty-panel-state .icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.empty-panel-state h3 {
  font-size: 1.4rem;
  margin: 0;
  color: #f8fafc;
}
.empty-panel-state p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}
.empty-panel-state p strong {
  color: #cbd5e1;
}
.profile-editor-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 1.5rem;
}
.editor-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #f8fafc;
}
.editor-header p {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}
.delete-profile-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.delete-profile-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.1);
}
.editor-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-section-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.form-section-card.highlight-card {
  border-color: rgba(74, 255, 197, 0.2);
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.6) 0%,
      rgba(74, 255, 197, 0.02) 100%);
}
.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-title .num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(74, 255, 197, 0.15);
  color: #4affc5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid rgba(74, 255, 197, 0.3);
}
.section-title h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: #cbd5e1;
}
.card-desc {
  font-size: 0.9rem;
  color: #64748b;
  margin: -0.75rem 0 0 0;
  line-height: 1.5;
}
.input-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.input-group.full-width {
  grid-column: span 2;
}
.input-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}
.input-with-button {
  display: flex;
  gap: 0.75rem;
}
.input-with-button .ops-input {
  flex: 1;
}
.action-search-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 0 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-search-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
.models-reusable-box {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.models-reusable-box strong {
  color: #60a5fa;
  font-size: 0.95rem;
}
.models-reusable-box p {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
}
.models-selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.model-import-btn {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.model-import-btn:hover {
  background: rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}
.har-upload-area {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(30, 41, 59, 0.2);
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
.file-uploader-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.upload-label-btn {
  background: rgba(74, 255, 197, 0.1);
  border: 1px solid rgba(74, 255, 197, 0.3);
  color: #4affc5;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}
.upload-label-btn:hover {
  background: rgba(74, 255, 197, 0.2);
  box-shadow: 0 0 12px rgba(74, 255, 197, 0.1);
}
.upload-info {
  font-size: 0.85rem;
  color: #64748b;
}
.har-preview-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}
.flex-align-center {
  display: flex;
  align-items: center;
  padding-top: 1.5rem;
}
.toggle-label-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: #cbd5e1;
}
.toggle-label-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #4affc5;
}
.test-control-row {
  display: flex;
}
.test-flow-btn {
  background: #f59e0b;
  color: #0f172a;
  border: none;
  padding: 0.65rem 1.5rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.test-flow-btn:hover:not(:disabled) {
  background: #d97706;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
}
.test-flow-btn:disabled {
  background: #334155;
  color: #64748b;
  cursor: not-allowed;
}
.test-results-box {
  background: rgba(30, 41, 59, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.test-summary-header {
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.75rem;
}
.test-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 250px;
  overflow-y: auto;
}
.test-step-row {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  gap: 1rem;
}
.test-step-row .step-num {
  font-weight: 700;
  color: #64748b;
  min-width: 60px;
}
.test-step-row .step-method {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
}
.test-step-row .step-url {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cbd5e1;
}
.test-step-row .step-status {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
}
.test-step-row .step-status.ok {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.test-step-row .step-status.err {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.editor-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.save-editor-btn {
  background: #4affc5;
  color: #0f172a;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 750;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.save-editor-btn:hover {
  background: #3ce5b0;
  box-shadow: 0 0 20px rgba(74, 255, 197, 0.35);
  transform: translateY(-1px);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: fadeIn 0.35s ease-out;
}
.automation-tabs-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.75rem;
}
.tab-nav-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 650;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px;
}
.tab-nav-btn:hover {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.02);
}
.tab-nav-btn.active {
  color: #4affc5;
  background: rgba(74, 255, 197, 0.05);
  box-shadow: inset 0 -2px 0 #4affc5;
}
.automation-logs-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.logs-header h2 {
  font-size: 1.5rem;
  font-weight: 750;
  margin: 0 0 0.25rem 0;
  color: #f8fafc;
}
.logs-header p {
  color: #94a3b8;
  margin: 0;
  font-size: 0.9rem;
}
.logs-filters-bar {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  background: rgba(30, 41, 59, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 1.25rem;
  border-radius: 10px;
}
.logs-filters-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.logs-filters-bar .filter-group label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
}
.logs-refresh-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  font-weight: 650;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 42px;
}
.logs-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.logs-loading-state,
.logs-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #64748b;
  font-style: italic;
  background: rgba(30, 41, 59, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}
.logs-table-wrapper {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
}
.logs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.logs-table th {
  background: rgba(30, 41, 59, 0.4);
  padding: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.logs-table td {
  padding: 1rem;
  font-size: 0.9rem;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.log-row {
  cursor: pointer;
  transition: background 0.2s ease;
}
.log-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.log-row.expanded {
  background: rgba(74, 255, 197, 0.02);
}
.log-row td.arrow-cell {
  color: #64748b;
  font-size: 0.75rem;
  text-align: center;
}
.log-action-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.8rem;
}
.log-result-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
}
.log-result-badge.success {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.log-result-badge.failed {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.log-result-badge.blocked {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.log-result-badge.not_found {
  background: rgba(100, 116, 139, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.log-blocked-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.log-blocked-badge.yes {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
.log-blocked-badge.no {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}
.log-detail-row td {
  padding: 0;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.log-details-expanded {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: fadeIn 0.2s ease-out;
}
.log-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.log-detail-section strong {
  font-size: 0.8rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.log-detail-section .summary-text {
  margin: 0;
  font-size: 0.95rem;
  color: #f1f5f9;
  background: rgba(30, 41, 59, 0.3);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 3px solid #4affc5;
}
.log-detail-section pre {
  margin: 0;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 6px;
  font-family:
    "Fira Code",
    "Courier New",
    monospace;
  font-size: 0.8rem;
  color: #38bdf8;
  overflow-x: auto;
  max-height: 250px;
}
.logs-pagination-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(30, 41, 59, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pagination-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-text {
  font-size: 0.85rem;
  color: #94a3b8;
}
.onboarding-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.onb-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.onb-header-row h3 {
  font-size: 1.4rem;
  margin: 0 0 0.25rem 0;
  color: #f8fafc;
}
.onb-header-row p {
  color: #94a3b8;
  margin: 0;
  font-size: 0.9rem;
}
.onb-loading {
  text-align: center;
  padding: 4rem;
  color: #64748b;
  font-style: italic;
}
.onb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}
.onb-profile-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.2s ease;
}
.onb-profile-card:hover {
  transform: translateY(-2px);
  border-color: rgba(74, 255, 197, 0.2);
  box-shadow: 0 8px 24px rgba(74, 255, 197, 0.05);
}
.onb-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.onb-card-header h4 {
  font-size: 1.15rem;
  margin: 0;
  color: #f1f5f9;
}
.onb-card-actions {
  display: flex;
  gap: 0.5rem;
}
.onb-edit-btn,
.onb-del-btn {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.onb-edit-btn {
  color: #60a5fa;
}
.onb-edit-btn:hover {
  background: rgba(96, 165, 250, 0.1);
}
.onb-del-btn {
  color: #f87171;
}
.onb-del-btn:hover {
  background: rgba(248, 113, 113, 0.1);
}
.onb-card-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
  height: 2.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.onb-card-details {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.onb-card-details div {
  display: flex;
  justify-content: space-between;
}
.onb-card-details div strong {
  color: #64748b;
}
.onb-card-details div span {
  color: #cbd5e1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.ops-input {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  padding: 0.6rem 0.8rem !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ops-input:focus {
  outline: none !important;
  border-color: #4affc5 !important;
  box-shadow: 0 0 10px rgba(74, 255, 197, 0.15) !important;
}
select.ops-input {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}
.help-text {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.2rem;
}
.checkbox-group {
  grid-column: span 2;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: #cbd5e1;
}
.checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #4affc5;
}
.hr-divider {
  margin-top: 1rem;
}
.hr-divider hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 1rem;
}
.hr-divider h4 {
  font-size: 1rem;
  margin: 0;
  color: #f1f5f9;
}
.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1.5rem;
}
.editor-actions button {
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.editor-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
.editor-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.editor-actions .btn-primary {
  background: #4affc5;
  border: none;
  color: #0f172a;
}
.editor-actions .btn-primary:hover {
  background: #3ce5b0;
  box-shadow: 0 0 16px rgba(74, 255, 197, 0.25);
}

/* src/index.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --color-bg: #000000;
  --color-surface: #111111;
  --color-surface-2: #161616;
  --color-surface-3: #1E1E1E;
  --color-accent: #4AFFC5;
  --color-accent-dark: #2DD4A0;
  --color-accent-glow: rgba(74, 255, 197, 0.15);
  --color-text: #FFFFFF;
  --color-text-secondary: #A0A0A0;
  --color-text-muted: #DEDEDE;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-accent: rgba(74, 255, 197, 0.3);
  --color-error: #FF4D6D;
  --color-error-bg: rgba(255, 77, 109, 0.1);
  --color-warning: #FFB347;
  --color-warning-bg: rgba(255, 179, 71, 0.1);
  --color-success: #4AFFC5;
  --color-success-bg: rgba(74, 255, 197, 0.1);
  --color-info: #60A5FA;
  --color-info-bg: rgba(96, 165, 250, 0.1);
  --font-primary: "Sora", sans-serif;
  --font-data: "Roboto", sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 30px rgba(74, 255, 197, 0.2);
  --sidebar-width: 260px;
  --header-height: 64px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --color-sidebar-bg: #0A0A0A;
  --color-header-bg: rgba(10, 10, 10, 0.85);
}
[data-theme=light] {
  --color-bg: #F0F4F8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F9FC;
  --color-surface-3: #EDF1F7;
  --color-accent: #1A6BE8;
  --color-accent-dark: #1250B0;
  --color-accent-glow: rgba(26, 107, 232, 0.12);
  --color-text: #0F1923;
  --color-text-secondary: #5A6680;
  --color-text-muted: #2C3A52;
  --color-border: rgba(0, 0, 0, 0.09);
  --color-border-accent: rgba(26, 107, 232, 0.3);
  --color-error: #D93025;
  --color-error-bg: rgba(217, 48, 37, 0.08);
  --color-warning: #E07B00;
  --color-warning-bg: rgba(224, 123, 0, 0.08);
  --color-success: #0D8050;
  --color-success-bg: rgba(13, 128, 80, 0.08);
  --color-info: #1A6BE8;
  --color-info-bg: rgba(26, 107, 232, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.18);
  --shadow-accent: 0 0 30px rgba(26, 107, 232, 0.15);
  --color-sidebar-bg: #FFFFFF;
  --color-header-bg: rgba(255, 255, 255, 0.92);
}
*,
*::before,
*::after {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.15s ease,
    box-shadow 0.25s ease;
}
html {
  height: 100%;
}
body {
  font-family: var(--font-primary);
  background: var(--color-bg);
  color: var(--color-text);
  height: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root {
  height: 100%;
  min-height: 100vh;
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition);
}
a:hover {
  color: var(--color-accent-dark);
}
button {
  font-family: var(--font-primary);
  cursor: pointer;
}
input,
textarea,
select {
  font-family: var(--font-primary);
}
select option {
  background-color: var(--color-surface);
  color: var(--color-text);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-accent);
}
::selection {
  background: rgba(74, 255, 197, 0.25);
  color: var(--color-text);
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.text-accent {
  color: var(--color-accent);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-error {
  color: var(--color-error);
}
.font-data {
  font-family: var(--font-data);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 50%, 90% {
    transform: translateX(-6px);
  }
  30%, 70% {
    transform: translateX(6px);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mintPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 255, 197, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(74, 255, 197, 0);
  }
}
.grecaptcha-badge {
  display: none !important;
}