/* ========================================================================
   NEUMORPHIC DARK — inspired by mhmdsairi.my.id
   Background: #0f172a (slate-900), shadows: #060a12 (dark) / #182442 (light)
   No borders — shadows define elevation
   ======================================================================== */

body {
  background: #0f172a;
  color: #f1f5f9;
}

/* --- Neumorphic utilities --- */
.neu-box {
  background: #0f172a;
  box-shadow: 8px 8px 16px #060a12, -8px -8px 16px #182442;
  border-radius: 24px;
}
.neu-box-sm {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 16px;
}
.neu-box-lg {
  background: #0f172a;
  box-shadow: 10px 10px 20px #060a12, -10px -10px 20px #182442;
  border-radius: 28px;
}
.neu-input {
  background: #0f172a !important;
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442 !important;
  border-radius: 16px !important;
  border: none !important;
  padding: 12px 16px;
  color: #f8fafc;
  width: 100%;
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s;
}
.neu-input:focus {
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442, 0 0 0 2px #4f46e560 !important;
}
.neu-btn {
  background: #0f172a !important;
  box-shadow: 8px 8px 16px #060a12, -8px -8px 16px #182442 !important;
  border-radius: 16px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  letter-spacing: 0.03em;
  color: #cbd5e1;
}
.neu-btn:active {
  box-shadow: inset 6px 6px 12px #060a12, inset -6px -6px 12px #182442 !important;
}
.neu-btn-primary {
  color: #fff !important;
  letter-spacing: 0.05em;
}
.neu-btn-primary:active {
  box-shadow: inset 6px 6px 12px #060a12, inset -6px -6px 12px #182442 !important;
}
.neu-btn-danger {
  color: #fca5a5 !important;
}
.neu-btn-danger:active {
  box-shadow: inset 6px 6px 12px #060a12, inset -6px -6px 12px #182442 !important;
}
.neu-card {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 20px;
  padding: 1.25rem;
  transition: all 0.2s ease;
}
.neu-card:hover {
  box-shadow: 8px 8px 16px #060a12, -8px -8px 16px #182442;
}
.neu-card-sm {
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  border-radius: 16px;
  padding: 1rem;
  transition: all 0.2s ease;
}
.neu-card-sm:hover {
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
}
.card {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 20px;
  padding: 1.25rem;
  transition: all 0.2s ease;
  color: #e2e8f0;
}
.card pre {
  background: #0f172a;
  box-shadow: inset 3px 3px 6px #060a12, inset -3px -3px 6px #182442;
  border-radius: 12px;
  padding: 0.75rem;
}
.neu-progress {
  height: 0.5rem;
  border-radius: 9999px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: inset 2px 2px 4px #060a12, inset -2px -2px 4px #182442;
}
.neu-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #6366f1, #8b5cf6);
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.neu-label {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  margin-left: 0.25rem;
}

/* --- Alerts --- */
.neu-alert-error {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  color: #fecaca;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border-left: 3px solid #ef4444;
}
.neu-alert-success {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  color: #bbf7d0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border-left: 3px solid #22c55e;
}

/* --- Theme Cards --- */
.theme-card {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 20px;
  padding: 1.25rem;
  transition: all 0.2s ease;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-wrap: anywhere;
}
.theme-card:hover {
  box-shadow: 8px 8px 16px #060a12, -8px -8px 16px #182442;
}

.theme-light .theme-card {
  background: #ffffff !important;
  box-shadow: 6px 6px 12px #d1d5db, -6px -6px 12px #ffffff !important;
}
.theme-light .theme-card:hover {
  box-shadow: 8px 8px 16px #d1d5db, -8px -8px 16px #ffffff !important;
}
.theme-light input:checked + .theme-card {
  box-shadow: inset 4px 4px 8px #d1d5db, inset -4px -4px 8px #ffffff !important;
}
input:checked + .theme-card {
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442 !important;
}
.card-link {
  display: block;
  padding: 1rem;
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  border-radius: 16px;
  border: none;
  color: #e2e8f0;
  text-decoration: none;
  transition: all 0.15s;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.card-link:hover {
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  color: #f1f5f9;
}
.card-stat {
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-stat:active {
  box-shadow: inset 3px 3px 6px #060a12, inset -3px -3px 6px #182442;
}
.card-stat-icon {
  line-height: 0;
  opacity: 0.85;
}
.card-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  border-radius: 16px;
  text-align: center;
  font-size: 0.875rem;
  color: #e2e8f0;
  transition: all 0.15s;
  min-height: 90px;
}
.card-action:hover {
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
}
.card-action-sm {
  gap: 0.35rem;
  padding: 0.55rem 0.35rem;
  min-height: 68px;
  font-size: 0.68rem;
  border-radius: 12px;
  box-shadow: 3px 3px 6px #060a12, -3px -3px 6px #182442;
}
.card-action-sm:hover {
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
}
.card-action-icon {
  line-height: 0;
  opacity: 0.85;
}
.card-action-icon svg {
  width: 18px;
  height: 18px;
}
.card-action-label {
  line-height: 1.2;
  font-weight: 600;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.1s;
  line-height: 1.2;
  border: none;
  letter-spacing: 0.03em;
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
}
.btn:active {
  box-shadow: inset 5px 5px 10px #060a12, inset -5px -5px 10px #182442 !important;
}
.btn-primary {
  background: #0f172a;
  color: #a5b4fc;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.btn-secondary {
  background: #0f172a;
  color: #cbd5e1;
}
.btn-danger {
  background: #0f172a;
  color: #fca5a5;
}

.form-input {
  background: #0f172a !important;
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442 !important;
  border-radius: 16px !important;
  border: none !important;
  padding: 12px 16px;
  color: #f8fafc;
  width: 100%;
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s;
}
.form-input:focus {
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442, 0 0 0 2px #4f46e560 !important;
}
.label {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  margin-left: 0.25rem;
}

.alert-error {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  color: #fecaca;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border-left: 3px solid #ef4444;
}
.alert-success {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  color: #bbf7d0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border-left: 3px solid #22c55e;
}
.alert-warning {
  background: #0f172a;
  box-shadow: 6px 6px 12px #060a12, -6px -6px 12px #182442;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  color: #fde68a;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border-left: 3px solid #f59e0b;
}

/* --- Code wrap --- */
.code-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  hyphens: none;
}
.code-field {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.card > *,
.grid > * {
  min-width: 0;
}

/* --- Confirm modal --- */
.confirm-modal {
  padding: max(1rem, env(safe-area-inset-top, 0px))
           max(1rem, env(safe-area-inset-right, 0px))
           max(1rem, env(safe-area-inset-bottom, 0px))
           max(1rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.confirm-modal__panel {
  background: #0f172a;
  box-shadow: 10px 10px 20px #060a12, -10px -10px 20px #182442;
  border-radius: 24px;
  margin: auto;
  max-height: calc(100dvh - 2rem);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}

/* --- Page loader --- */
.page-loader__panel {
  background: #0f172a;
  box-shadow: 12px 12px 24px #060a12, -12px -12px 24px #182442;
  border-radius: 24px;
}
.page-loader__ring--outer {
  border: 3px solid #1e293b;
}
.page-loader__ring--spin {
  border: 3px solid transparent;
  border-top-color: #818cf8;
  border-right-color: #818cf850;
  animation: loader-spin 0.9s linear infinite;
}
.page-loader__ring--pulse {
  border: 2px solid #6366f170;
  animation: loader-pulse 1.6s ease-in-out infinite;
}
.page-loader.is-payment .page-loader__ring--spin {
  border-top-color: #34d399;
  border-right-color: #34d39950;
}
.page-loader.is-payment .page-loader__ring--pulse {
  border-color: #10b98180;
}
.page-loader.is-payment .page-loader__panel {
  box-shadow: 0 12px 24px #060a12, -12px -12px 24px #182442;
}
.page-loader__icon {
  animation: loader-icon-bob 1.2s ease-in-out infinite;
}
.page-loader__bar {
  height: 4px;
  width: 100%;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
}
.page-loader__bar-fill {
  height: 100%;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5, #34d399, #818cf8);
  animation: loader-bar-slide 1.4s ease-in-out infinite;
}
.page-loader.is-payment .page-loader__bar-fill {
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
}
.page-loader__dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.page-loader__dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #94a3b8;
  animation: loader-dot-bounce 1.1s ease-in-out infinite;
}
.page-loader.is-payment .page-loader__dots span {
  background: #34d399;
}
.page-loader__dots span:nth-child(2) { animation-delay: 0.15s; }
.page-loader__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes loader-icon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes loader-bar-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}
@keyframes loader-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* --- Sidebar transition --- */
#sidebar { transition: transform 0.2s ease; }

/* --- Sidebar --- */
.neu-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  font-size: 0.875rem;
  color: #94a3b8;
  transition: all 0.15s ease;
  cursor: pointer;
}
.neu-sidebar-link:hover {
  background: #0f172a;
  box-shadow: 5px 5px 10px #060a12, -5px -5px 10px #182442;
  color: #e2e8f0;
}
.neu-sidebar-link.active {
  background: #0f172a;
  box-shadow: 5px 5px 10px #060a12, -5px -5px 10px #182442;
  color: #a5b4fc;
}
.neu-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #0f172a;
  box-shadow: 3px 3px 6px #060a12, -3px -3px 6px #182442;
  flex-shrink: 0;
}
.neu-sidebar-link.active .neu-sidebar-icon {
  box-shadow: inset 3px 3px 6px #060a12, inset -3px -3px 6px #182442;
}
.neu-sidebar-group {
  font-size: 0.6rem;
  color: #475569;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.5rem 0.75rem 0.25rem;
  margin-top: 0.75rem;
}

/* --- Dropdown parent --- */
.neu-sidebar-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.6rem 0.75rem;
  margin-top: 0.75rem;
  border-radius: 12px;
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  transition: all 0.2s ease;
  user-select: none;
}
.neu-sidebar-dropdown:hover {
  color: #e2e8f0;
  box-shadow: 5px 5px 10px #060a12, -5px -5px 10px #182442;
}
.neu-sidebar-dropdown.open {
  color: #c7d2fe;
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442;
}
.neu-sidebar-dropdown .chevron {
  transition: transform 0.25s ease;
  opacity: 0.6;
  flex-shrink: 0;
}
.neu-sidebar-dropdown.open .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* --- Collapsible children --- */
.neu-sidebar-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 0.5rem;
}
.neu-sidebar-children.open {
  max-height: 600px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.neu-sidebar-children .neu-sidebar-link {
  padding-left: 1rem;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  border-left: 2px solid transparent;
}
.neu-sidebar-children .neu-sidebar-link:hover,
.neu-sidebar-children .neu-sidebar-link.active {
  border-left-color: #818cf8;
}
.neu-sidebar-children .neu-sidebar-link svg {
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.neu-sidebar-children .neu-sidebar-link .neu-sidebar-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #060a12, -2px -2px 4px #182442;
}

/* --- Bottom nav icons neumorphic --- */
.neu-bottom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  margin-bottom: 0.25rem;
}
.neu-bottom-icon.active {
  box-shadow: inset 4px 4px 8px #060a12, inset -4px -4px 8px #182442;
  color: #818cf8;
}

/* --- Header icons --- */
.neu-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #0f172a;
  box-shadow: 3px 3px 6px #060a12, -3px -3px 6px #182442;
}
.neu-header-icon-round {
  border-radius: 50%;
}

/* --- Scrollbar --- */

/* Hide scrollbar strictly on sidebar */
#sidebar::-webkit-scrollbar { display: none; }
#sidebar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Firefox and Edge */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* --- JSON / Pre --- */
pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* --- Tabs neumorphic --- */
.neu-tabs {
  background: #0f172a;
  box-shadow: inset 3px 3px 6px #060a12, inset -3px -3px 6px #182442;
  border-radius: 16px;
  padding: 4px;
}
.neu-tab {
  padding: 0.6rem 1rem;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.15s;
  cursor: pointer;
  color: #64748b;
  text-align: center;
}
.neu-tab-active {
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  color: #a5b4fc;
}

/* --- Stat card (dashboard hero field) --- */
.neu-stat {
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  border-radius: 14px;
  padding: 0.75rem 1rem;
}

/* --- Dashboard inset card & badge --- */
.neu-inset-card {
  box-shadow: inset 3px 3px 6px #060a12, inset -3px -3px 6px #182442;
}
.neu-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #e2e8f0;
}

/* --- Toggle switch style --- */
.neu-toggle {
  background: #0f172a;
  box-shadow: inset 3px 3px 6px #060a12, inset -3px -3px 6px #182442;
  border-radius: 999px;
  width: 44px;
  height: 24px;
  padding: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.neu-toggle.on {
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
}
.neu-toggle-knob {
  width: 20px;
  height: 20px;
  background: #334155;
  border-radius: 999px;
  transition: all 0.2s;
}
.neu-toggle.on .neu-toggle-knob {
  background: #818cf8;
  transform: translateX(20px);
}

/* ========================================================================
   LIGHT THEME OVERRIDES
   ======================================================================== */
/* --- Light theme overrides --- */
.theme-light body {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}
.theme-light header {
  background: rgba(255,255,255,0.85) !important;
}
.theme-light header a,
.theme-light header span,
.theme-light header button {
  color: #475569 !important;
}
.theme-light .neu-box,
.theme-light .neu-box-sm,
.theme-light .neu-card,
.theme-light .neu-card-sm,
.theme-light .card,
.theme-light .card-link,
.theme-light .card-action,
.theme-light .btn,
.theme-light .confirm-modal__panel,
.theme-light .page-loader__panel,
.theme-light .neu-tab-active {
  background: #ffffff !important;
  box-shadow: 8px 8px 16px #d1d5db, -8px -8px 16px #ffffff !important;
}
.theme-light .neu-input,
.theme-light .form-input {
  background: #ffffff !important;
  box-shadow: inset 4px 4px 8px #d1d5db, inset -4px -4px 8px #ffffff !important;
}
.theme-light .neu-btn:active,
.theme-light .btn:active {
  box-shadow: inset 5px 5px 10px #d1d5db, inset -5px -5px 10px #ffffff !important;
}
.theme-light .neu-tabs {
  box-shadow: inset 3px 3px 6px #d1d5db, inset -3px -3px 6px #ffffff !important;
  background: transparent !important;
}
.theme-light .neu-alert-success,
.theme-light .alert-success {
  color: #065f46 !important;
  background: #d1fae5 !important;
  border-left: 3px solid #059669 !important;
  font-weight: 600;
  box-shadow: 6px 6px 12px #d1d5db, -6px -6px 12px #ffffff, inset 0 0 0 1px rgba(5, 150, 105, 0.25) !important;
}
.theme-light .neu-alert-error,
.theme-light .alert-error {
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border-left-color: #ef4444 !important;
  box-shadow: 6px 6px 12px #d1d5db, -6px -6px 12px #ffffff, inset 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
}
.theme-light .alert-warning {
  color: #b45309 !important;
  background: #fffbeb !important;
  border-left: 3px solid #f59e0b !important;
  box-shadow: 6px 6px 12px #d1d5db, -6px -6px 12px #ffffff, inset 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
}
.theme-light .neu-stat {
  background: #ffffff !important;
  box-shadow: 4px 4px 8px #d1d5db, -4px -4px 8px #ffffff !important;
}
.theme-light .neu-inset-card {
  box-shadow: inset 3px 3px 6px #d1d5db, inset -3px -3px 6px #ffffff !important;
}
.theme-light .card-stat:active {
  box-shadow: inset 3px 3px 6px #d1d5db, inset -3px -3px 6px #ffffff !important;
}
.theme-light .card {
  color: #334155 !important;
}
.theme-light .card pre {
  background: #f1f5f9 !important;
  box-shadow: inset 3px 3px 6px #d1d5db, inset -3px -3px 6px #ffffff !important;
}
.theme-light .neu-progress {
  background: #f1f5f9 !important;
  box-shadow: inset 2px 2px 4px #d1d5db, inset -2px -2px 4px #ffffff !important;
}
.theme-light .neu-badge {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}
.theme-light .text-emerald-300 { color: #059669 !important; }
.theme-light .text-amber-300 { color: #d97706 !important; }
.theme-light .text-sky-300 { color: #0284c7 !important; }
.theme-light .text-fuchsia-300 { color: #c026d3 !important; }
.theme-light .text-red-400 { color: #dc2626 !important; }
.theme-light .page-loader__backdrop {
  background: rgba(241,245,249,0.88) !important;
}
.theme-light #page-loader-msg { color: #334155 !important; }
.theme-light #page-loader-sub { color: #94a3b8 !important; }
.theme-light .page-loader__ring--outer { border-color: #e2e8f0 !important; }
.theme-light #sidebar { background: #ffffff !important; }
.theme-light #sidebar nav a { color: #475569 !important; }
.theme-light #sidebar nav a.text-indigo-200 { color: #4f46e5 !important; }
.theme-light .text-slate-200 { color: #334155 !important; }
.theme-light .text-slate-300 { color: #475569 !important; }
.theme-light .text-slate-400 { color: #64748b !important; }
.theme-light .text-slate-500 { color: #94a3b8 !important; }
.theme-light .text-slate-600 { color: #94a3b8 !important; }
.theme-light .text-slate-100 { color: #1e293b !important; }
.theme-light .text-indigo-300 { color: #4f46e5 !important; }
.theme-light .text-indigo-200 { color: #4f46e5 !important; }
.theme-light .bg-slate-950 { background: #f1f5f9 !important; }
.theme-light .bg-slate-900 { background: #ffffff !important; }
.theme-light .bg-slate-900\/70 { background: rgba(255,255,255,0.85) !important; }
.theme-light .bg-slate-900\/95 { background: rgba(255,255,255,0.95) !important; }
.theme-light .bg-slate-800 { background: #e2e8f0 !important; }
.theme-light .bg-slate-800\/60 { background: rgba(226,232,240,0.8) !important; }
.theme-light .bg-black\/50 { background: rgba(0,0,0,0.15) !important; }
.theme-light .border-slate-800 { border-color: #e2e8f0 !important; }
.theme-light .border-slate-700 { border-color: #e2e8f0 !important; }

/* Light theme: Sidebar, Bottom Nav, Header Icons */
.theme-light .neu-sidebar-link {
  color: #334155 !important;
}
.theme-light .neu-sidebar-link:hover {
  background: #f1f5f9 !important;
  box-shadow: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff !important;
  color: #0f172a !important;
}
.theme-light .neu-sidebar-link.active {
  background: #f1f5f9 !important;
  box-shadow: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff !important;
  color: #4338ca !important;
}
.theme-light .neu-sidebar-icon {
  background: #f1f5f9 !important;
  box-shadow: 3px 3px 6px #d1d5db, -3px -3px 6px #ffffff !important;
}
.theme-light .neu-sidebar-link.active .neu-sidebar-icon {
  box-shadow: inset 3px 3px 6px #d1d5db, inset -3px -3px 6px #ffffff !important;
}
.theme-light .neu-sidebar-group {
  color: #64748b !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.theme-light .neu-sidebar-dropdown {
  background: #f1f5f9 !important;
  box-shadow: 4px 4px 8px #d1d5db, -4px -4px 8px #ffffff !important;
  color: #334155 !important;
}
.theme-light .neu-sidebar-dropdown:hover {
  box-shadow: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff !important;
  color: #1e293b !important;
}
.theme-light .neu-sidebar-dropdown.open {
  box-shadow: inset 4px 4px 8px #d1d5db, inset -4px -4px 8px #ffffff !important;
  color: #4338ca !important;
}
.theme-light .neu-sidebar-dropdown .chevron {
  opacity: 0.7 !important;
}
.theme-light .neu-sidebar-children .neu-sidebar-link {
  color: #475569 !important;
}
.theme-light .neu-sidebar-children .neu-sidebar-link:hover,
.theme-light .neu-sidebar-children .neu-sidebar-link.active {
  border-left-color: #4338ca !important;
  color: #1e293b !important;
}
.theme-light .neu-sidebar-children .neu-sidebar-link .neu-sidebar-icon {
  background: #f1f5f9 !important;
  box-shadow: 2px 2px 4px #d1d5db, -2px -2px 4px #ffffff !important;
}
.theme-light .neu-sidebar-children .neu-sidebar-link.active .neu-sidebar-icon {
  box-shadow: inset 2px 2px 4px #d1d5db, inset -2px -2px 4px #ffffff !important;
}
.theme-light .neu-bottom-icon {
  background: #f1f5f9 !important;
  box-shadow: 4px 4px 8px #d1d5db, -4px -4px 8px #ffffff !important;
}
.theme-light .neu-bottom-icon.active {
  box-shadow: inset 4px 4px 8px #d1d5db, inset -4px -4px 8px #ffffff !important;
  color: #4338ca !important;
}
.theme-light .neu-header-icon {
  background: #f1f5f9 !important;
  box-shadow: 3px 3px 6px #d1d5db, -3px -3px 6px #ffffff !important;
}

/* Light theme: Sidebar container */
.theme-light #sidebar {
  background: #ffffff !important;
  box-shadow: 8px 0 20px #d1d5db !important;
  border-right: 1px solid #e2e8f0 !important;
}
.theme-light #sidebar .text-slate-400 { color: #64748b !important; }
.theme-light #sidebar .text-slate-200 { color: #1e293b !important; }
.theme-light #sidebar .text-slate-600 { color: #94a3b8 !important; }

/* Light theme: Bottom nav container */
.theme-light nav.fixed.bottom-0 {
  background: #ffffff !important;
  box-shadow: 0 -4px 20px #d1d5db !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Light theme: Header container */
.theme-light header {
  background: #ffffff !important;
  box-shadow: 0 4px 20px #d1d5db !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* --- Light theme: extended fixes (v8) --- */
.theme-light .neu-box-lg {
  background: #ffffff !important;
  box-shadow: 10px 10px 20px #d1d5db, -10px -10px 20px #ffffff !important;
}
.theme-light .neu-label,
.theme-light .label {
  color: #64748b !important;
}
.theme-light .neu-input,
.theme-light .form-input {
  color: #0f172a !important;
}
.theme-light .btn-primary { color: #4338ca !important; }
.theme-light .btn-secondary { color: #475569 !important; }
.theme-light .btn-danger { color: #dc2626 !important; }
.theme-light .neu-tab { color: #64748b !important; }
.theme-light .neu-tab-active { color: #4338ca !important; }
.theme-light .text-indigo-400 { color: #4f46e5 !important; }
.theme-light .text-white { color: #0f172a !important; }
.theme-light .hover\:text-white:hover { color: #0f172a !important; }
.theme-light .hover\:text-slate-200:hover { color: #334155 !important; }
.theme-light #confirm-backdrop,
.theme-light .page-loader__backdrop {
  background: rgba(241, 245, 249, 0.88) !important;
}
.theme-light #confirm-title { color: #0f172a !important; }
.theme-light #confirm-message { color: #475569 !important; }
.theme-light #confirm-detail {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
.theme-light #confirm-icon {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #d97706 !important;
}
.theme-light pre,
.theme-light .bg-\[\#0f172a\] {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0;
}
.theme-light .card-link.bg-emerald-500\/10 {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.theme-light .card-link.bg-amber-500\/10 {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.theme-light .card-link.bg-sky-500\/10 {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.theme-light .card-link.bg-fuchsia-500\/10 {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.theme-light .card-link.hover\:bg-emerald-500\/20:hover { background: #f8fafc !important; }
.theme-light .card-link.hover\:bg-amber-500\/20:hover { background: #f8fafc !important; }
.theme-light .card-link.hover\:bg-sky-500\/20:hover { background: #f8fafc !important; }
.theme-light .card-link.hover\:bg-fuchsia-500\/20:hover { background: #f8fafc !important; }
.theme-light .card-action { color: #334155 !important; }
.theme-light .card-action:hover {
  box-shadow: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff !important;
}
.theme-light .neu-toggle {
  background: #e2e8f0 !important;
  box-shadow: inset 3px 3px 6px #cbd5e1, inset -3px -3px 6px #ffffff !important;
}
.theme-light .neu-toggle-knob { background: #94a3b8 !important; }
.theme-light .neu-toggle.on .neu-toggle-knob { background: #4f46e5 !important; }
.theme-light .hover\:bg-slate-800:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.theme-light .neu-tabs { background: #e2e8f0 !important; }
.theme-light .neu-tabs .neu-tab-active { background: #ffffff !important; }
.theme-light .text-red-300 { color: #dc2626 !important; }
.theme-light .hover\:text-red-300:hover { color: #b91c1c !important; }
.theme-light .border-amber-500\/30,
.theme-light .border-emerald-500\/30,
.theme-light .border-sky-500\/30,
.theme-light .border-fuchsia-500\/30 {
  border-width: 1px;
  border-style: solid;
}
/* --- Hide sidebar scrollbar --- */
#sidebar::-webkit-scrollbar { display: none; }
#sidebar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- Hide sidebar scrollbar --- */
#sidebar::-webkit-scrollbar { display: none; }
#sidebar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- Neumorphic Pill --- */
.neu-pill {
  background: #0f172a;
  box-shadow: 4px 4px 8px #060a12, -4px -4px 8px #182442;
  border-radius: 9999px;
  border: none !important;
}
.theme-light .neu-pill {
  background: #ffffff !important;
  box-shadow: 4px 4px 8px #d1d5db, -4px -4px 8px #ffffff !important;
}

/* --- Hide all scrollbars for clean UI --- */
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
* {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ========================================================================
   XL AKRAB / XL CIRCLE MANAGER — video-like table/action UI
   ======================================================================== */
.xl-manager{max-width:980px;margin:0 auto 2rem;}
.xl-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:1rem 1.1rem;border-radius:18px;color:#fff;box-shadow:0 14px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden;position:relative;}
.xl-hero:after{content:"";position:absolute;right:-44px;top:-54px;width:145px;height:145px;border-radius:999px;background:rgba(255,255,255,.18);filter:blur(2px);}
.xl-hero-akrab{background:linear-gradient(135deg,#0891b2,#0ea5e9 55%,#06b6d4);}
.xl-hero-circle{background:linear-gradient(135deg,#0f766e,#06b6d4 55%,#2563eb);}
.xl-hero-kicker{font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;opacity:.78;font-weight:900;}
.xl-hero h1{font-size:1.25rem;line-height:1.2;font-weight:900;letter-spacing:.04em;margin:.15rem 0;}
.xl-hero p{font-size:.72rem;line-height:1.35;opacity:.82;max-width:34rem;}
.xl-refresh{position:relative;z-index:1;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(15,23,42,.24);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
.xl-flash{display:flex;align-items:center;gap:.55rem;padding:.72rem .85rem;margin-bottom:.8rem;border-radius:14px;font-size:.8rem;font-weight:800;box-shadow:6px 6px 12px #060a12,-6px -6px 12px #182442;}
.xl-flash.ok{color:#86efac;background:rgba(34,197,94,.08);}
.xl-flash.fail{color:#fca5a5;background:rgba(239,68,68,.08);}
.xl-flash.neutral{color:#cbd5e1;background:rgba(15,23,42,.78);border:1px solid rgba(148,163,184,.22);}
.xl-panel{background:#0f172a;box-shadow:6px 6px 12px #060a12,-6px -6px 12px #182442;border-radius:16px;margin:.72rem 0;overflow:hidden;}
.xl-accordion-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.82rem .9rem;color:#cbd5e1;font-weight:900;font-size:.78rem;letter-spacing:.01em;background:linear-gradient(180deg,rgba(30,41,59,.30),rgba(15,23,42,0));border:none;text-align:left;}
.xl-accordion-head span{display:flex;align-items:center;gap:.55rem;}
.xl-accordion-body{display:none;padding:.82rem .9rem 1rem;border-top:1px solid rgba(148,163,184,.08);}
.xl-accordion-body.show{display:block;}
.xl-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;}
@media (min-width:720px){.xl-info-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.xl-info-card{border-radius:14px;background:#0f172a;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;padding:.7rem .78rem;min-width:0;}
.xl-info-card small{display:block;color:#64748b;font-size:.61rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin-bottom:.18rem;}
.xl-info-card b{display:block;color:#e2e8f0;font-size:.77rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.xl-meter{min-width:0;}
.xl-meter-label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.72rem;color:#94a3b8;margin-bottom:.35rem;}
.xl-meter-label b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#e2e8f0;font-size:.68rem;white-space:nowrap;}
.xl-meter-track{height:9px;border-radius:999px;background:#111827;box-shadow:inset 2px 2px 4px #060a12,inset -2px -2px 4px #182442;overflow:hidden;}
.xl-meter-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#06b6d4,#3b82f6);min-width:2px;}
.xl-note{font-size:.68rem;color:#94a3b8;line-height:1.5;padding-left:1rem;list-style:disc;}
.xl-tools{display:flex;align-items:center;gap:.45rem;margin-bottom:.72rem;}
.xl-search{flex:1;display:flex;align-items:center;gap:.45rem;border-radius:14px;background:#0f172a;box-shadow:inset 4px 4px 8px #060a12,inset -4px -4px 8px #182442;padding:.56rem .7rem;color:#64748b;min-width:0;}
.xl-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#e2e8f0;font-size:.75rem;}
.xl-icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#0f172a;box-shadow:4px 4px 8px #060a12,-4px -4px 8px #182442;color:#67e8f9;border:none;flex:0 0 auto;}
.xl-inline-box{display:none;margin:.55rem 0 .85rem;border-radius:14px;padding:.75rem;background:rgba(14,165,233,.06);box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;color:#cbd5e1;font-size:.72rem;}
.xl-inline-box.show{display:block;}
.xl-inline-box b{display:block;color:#e2e8f0;margin-bottom:.25rem;}
.xl-inline-box p{color:#94a3b8;font-size:.68rem;line-height:1.45;}
.xl-table-wrap{overflow-x:auto;border-radius:12px;background:#0b1220;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;}
.xl-table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;font-size:.68rem;}
.xl-table.small{min-width:500px;}
.xl-table th{color:#cbd5e1;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;padding:.72rem .52rem;text-align:left;border-bottom:1px solid rgba(148,163,184,.10);white-space:nowrap;}
.xl-table td{padding:.52rem;border-bottom:1px solid rgba(148,163,184,.06);vertical-align:middle;color:#cbd5e1;}
.xl-actions{display:flex;align-items:center;gap:.23rem;white-space:nowrap;}
.xl-actions form{display:inline-flex;margin:0;}
.xl-act{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.63rem;border:none;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 3px 8px rgba(0,0,0,.25);}
.xl-act.wa{background:#16a34a;}
.xl-act.view{background:#2563eb;}
.xl-act.edit{background:#f59e0b;}
.xl-act.del{background:#dc2626;}
.xl-act.add{background:#06b6d4;}
.xl-act.acc{background:#22c55e;}
.xl-slot{display:inline-flex;min-width:34px;justify-content:center;border-radius:999px;padding:.15rem .38rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;font-size:.62rem;color:#fff;}
.xl-slot.red{background:#e11d48;}
.xl-slot.green{background:#16a34a;}
.xl-slot.yellow{background:#ca8a04;}
.xl-slot.black{background:#020617;color:#e5e7eb;}
.xl-slot.red{box-shadow:0 0 0 1px rgba(244,63,94,.40),0 0 12px rgba(225,29,72,.18);}
.xl-slot.green{box-shadow:0 0 0 1px rgba(34,197,94,.35),0 0 12px rgba(22,163,74,.16);}
.xl-slot.yellow{box-shadow:0 0 0 1px rgba(250,204,21,.35),0 0 12px rgba(202,138,4,.15);}
.xl-slot.black{box-shadow:0 0 0 1px rgba(148,163,184,.24),0 0 12px rgba(0,0,0,.35);}
.xl-number{border:none;border-radius:6px;padding:.22rem .48rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;font-size:.62rem;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);white-space:nowrap;}
.xl-number.blue{background:#2563eb;}
.xl-number.yellow{background:#ca8a04;}
.xl-number.empty{background:#334155;color:#cbd5e1;}
.xl-type,.xl-date,.xl-status{display:inline-flex;align-items:center;border-radius:999px;padding:.18rem .45rem;font-size:.6rem;font-weight:900;white-space:nowrap;}
.xl-type{background:rgba(99,102,241,.13);color:#c7d2fe;}
.xl-date{background:rgba(148,163,184,.10);color:#cbd5e1;}
.xl-status.ok{background:rgba(34,197,94,.14);color:#86efac;}
.xl-status.warn{background:rgba(245,158,11,.14);color:#fcd34d;}
.xl-status.neutral{background:rgba(148,163,184,.12);color:#cbd5e1;}
.xl-detail-row{display:none;}
.xl-detail-row.show-row{display:table-row;}
.xl-detail-row > td{background:rgba(2,6,23,.35);padding:.75rem!important;}
.xl-detail-card{border-radius:14px;background:#0f172a;box-shadow:4px 4px 8px #060a12,-4px -4px 8px #182442;padding:.82rem;}
.xl-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;margin-bottom:.8rem;}
.xl-detail-title{color:#e2e8f0;font-weight:900;font-size:.78rem;line-height:1.3;word-break:break-word;}
.xl-detail-title small{display:block;color:#94a3b8;font-size:.65rem;font-weight:700;margin-top:.1rem;}
.xl-detail-sub{color:#64748b;font-size:.65rem;line-height:1.35;margin-top:.18rem;word-break:break-word;}
.xl-copy{border:none;border-radius:999px;padding:.3rem .55rem;background:#0f172a;box-shadow:3px 3px 6px #060a12,-3px -3px 6px #182442;color:#86efac;font-size:.62rem;font-weight:900;white-space:nowrap;}
.xl-quota-list{display:grid;gap:.62rem;margin:.62rem 0;}
.xl-detail-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.72rem;}
.xl-form-grid{display:grid;grid-template-columns:1fr;gap:.55rem;align-items:end;}
@media (min-width:720px){.xl-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.xl-form-grid .xl-submit{grid-column:auto;}}
.xl-form-grid label{display:block;color:#64748b;font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.xl-form-grid input{display:block;width:100%;margin-top:.28rem;background:#0f172a;border:none;border-radius:12px;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;color:#e2e8f0;padding:.62rem .72rem;font-size:.75rem;outline:none;}
.xl-submit{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;border:none;border-radius:12px;background:#0f172a;box-shadow:4px 4px 8px #060a12,-4px -4px 8px #182442;color:#93c5fd;font-size:.7rem;font-weight:900;letter-spacing:.05em;padding:.68rem .8rem;min-height:39px;}
.xl-submit.danger{color:#fca5a5;}
.xl-product-row{display:flex;align-items:center;gap:.7rem;border-radius:14px;background:#0f172a;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;padding:.7rem;}
.xl-product-row div{min-width:0;flex:1;}
.xl-product-row b{display:block;color:#e2e8f0;font-size:.76rem;}
.xl-product-row small{display:block;color:#94a3b8;font-size:.65rem;margin-top:.15rem;}
.xl-product-badge{border-radius:999px;padding:.18rem .45rem;font-size:.56rem;font-weight:900;letter-spacing:.04em;}
.xl-product-badge.open{background:#f472b6;color:#fff;}
.xl-stock{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;border-radius:8px;background:#14532d;color:#86efac;font-size:.68rem;font-weight:900;}
.xl-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:1.2rem;border-radius:16px;background:rgba(15,23,42,.65);box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;color:#94a3b8;}
.xl-empty-state i{font-size:2rem;color:#38bdf8;}
.xl-empty-state b{color:#e2e8f0;font-size:.92rem;}
.xl-empty-state span{font-size:.75rem;max-width:32rem;}
.theme-light .xl-panel,.theme-light .xl-detail-card,.theme-light .xl-submit,.theme-light .xl-copy,.theme-light .xl-icon-btn{background:#fff!important;box-shadow:6px 6px 12px #d1d5db,-6px -6px 12px #fff!important;}
.theme-light .xl-table-wrap,.theme-light .xl-info-card,.theme-light .xl-search,.theme-light .xl-meter-track,.theme-light .xl-inline-box,.theme-light .xl-product-row,.theme-light .xl-empty-state,.theme-light .xl-form-grid input{background:#f8fafc!important;box-shadow:inset 3px 3px 6px #d1d5db,inset -3px -3px 6px #fff!important;}
.theme-light .xl-accordion-head,.theme-light .xl-info-card b,.theme-light .xl-detail-title,.theme-light .xl-product-row b{color:#1e293b!important;}
.theme-light .xl-table td,.theme-light .xl-table th{color:#334155!important;}
.theme-light .xl-table-wrap{border:1px solid #e2e8f0;}

/* ========================================================================
   FLAZDATA-LIKE PAGES: History, Cek XL Axis, Auth XL
   ======================================================================== */
.flaz-page{max-width:560px;margin:0 auto 2rem;font-size:.74rem;}
.flaz-blue-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;width:100%;border:none;border-radius:12px;padding:.72rem .86rem;background:linear-gradient(180deg,#08a7f0,#0274ad);color:#e0f2fe;font-weight:900;letter-spacing:.01em;box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2);text-align:left;}
.flaz-blue-head.slim{margin-top:.56rem;background:linear-gradient(180deg,#0b8bd0,#075985);padding:.62rem .78rem;}
.flaz-blue-head span{display:flex;align-items:center;gap:.46rem;}
.flaz-blue-head a,.flaz-blue-head > i{color:#e0f2fe;}
.flaz-card,.flaz-accordion,.flaz-pack{background:#0f172a;border-radius:12px;margin:.62rem 0;box-shadow:5px 5px 10px #060a12,-5px -5px 10px #182442;overflow:hidden;}
.flaz-card{padding:.72rem;}
.flaz-acc-body,.flaz-pack-body{display:none;padding:.72rem;border-top:1px solid rgba(148,163,184,.08);}
.flaz-acc-body.show,.flaz-pack-body.show{display:block;}
.flaz-check-form,.flaz-auth-form{display:grid;gap:.58rem;}
.flaz-check-form input,.flaz-auth-form input{width:100%;background:#0b1220;color:#e2e8f0;border:1px solid rgba(148,163,184,.12);border-radius:10px;padding:.68rem .78rem;outline:none;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;font-size:.78rem;}
.flaz-two-btn{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.flaz-two-btn button,.flaz-two-btn a{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;border:1px solid #0284c7;border-radius:10px;background:#0b1220;color:#38bdf8;font-weight:900;font-size:.66rem;padding:.58rem .45rem;text-align:center;box-shadow:4px 4px 8px #060a12,-4px -4px 8px #182442;}
.flaz-two-btn.auth button,.flaz-two-btn.auth a{border-color:#16a34a;color:#86efac;}
.flaz-profile-card{padding:.78rem .9rem;}
.flaz-profile-grid{display:grid;grid-template-columns:1fr auto;gap:.36rem .9rem;align-items:center;}
.flaz-profile-grid div{color:#94a3b8;font-weight:800;}
.flaz-profile-grid b{color:#e2e8f0;font-weight:900;text-align:right;}
.flaz-profile-grid .fa-circle-check{color:#e2e8f0;}
.flaz-profile-grid .fa-circle-xmark{color:#f87171;}
.flaz-pack-head{width:100%;display:flex;align-items:center;justify-content:space-between;border:none;background:#075985;color:#e0f2fe;font-weight:900;text-align:left;padding:.56rem .72rem;font-size:.68rem;}
.flaz-quota-row{display:grid;grid-template-columns:1fr auto;gap:.28rem .7rem;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(148,163,184,.07);}
.flaz-quota-row:last-child{border-bottom:0;}
.flaz-quota-name{color:#cbd5e1;font-weight:800;}
.flaz-quota-value{color:#e2e8f0;font-size:.66rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;}
.flaz-quota-track{grid-column:1/-1;height:8px;border-radius:999px;background:#111827;box-shadow:inset 2px 2px 4px #060a12,inset -2px -2px 4px #182442;overflow:hidden;}
.flaz-quota-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#38bdf8);min-width:2px;}
.flaz-tools{display:flex;align-items:center;gap:.45rem;margin-bottom:.64rem;}
.flaz-search{flex:1;background:#0b1220;border:1px solid rgba(148,163,184,.12);border-radius:9px;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;}
.flaz-search input{width:100%;padding:.48rem .62rem;border:0;outline:0;background:transparent;color:#e2e8f0;font-size:.68rem;}
.flaz-date{border:1px solid rgba(148,163,184,.18);border-radius:9px;padding:.48rem .56rem;color:#cbd5e1;background:#0b1220;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;}
.flaz-refresh{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#38bdf8;background:#0b1220;box-shadow:3px 3px 6px #060a12,-3px -3px 6px #182442;flex:0 0 auto;}
.flaz-table-wrap{overflow-x:auto;border-radius:10px;background:#0b1220;border:1px solid rgba(148,163,184,.08);}
.flaz-table{width:100%;border-collapse:separate;border-spacing:0;min-width:420px;font-size:.62rem;}
.flaz-table th{padding:.58rem .48rem;color:#cbd5e1;font-size:.57rem;text-transform:uppercase;letter-spacing:.08em;text-align:left;border-bottom:1px solid rgba(148,163,184,.10);}
.flaz-table td{padding:.48rem;border-bottom:1px solid rgba(148,163,184,.06);vertical-align:middle;color:#cbd5e1;}
.flaz-table tbody tr:last-child td{border-bottom:0;}
.flaz-table td b{display:block;color:#e2e8f0;font-size:.64rem;line-height:1.28;}
.flaz-table td small{display:block;color:#94a3b8;font-size:.56rem;margin-top:.12rem;line-height:1.25;}
.flaz-time{display:inline-flex;background:#2563eb;color:#fff;border-radius:999px;padding:.16rem .34rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;}
.flaz-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.18rem .38rem;font-weight:900;font-size:.55rem;margin:.08rem;color:#fff;white-space:nowrap;}
.flaz-status.ok{background:#16a34a;}
.flaz-status.fail{background:#dc2626;}
.flaz-status.warn,.flaz-status.pay{background:#ca8a04;}
.flaz-actions{display:flex;align-items:center;gap:.25rem;}
.flaz-actions form{display:inline-flex;margin:0;}
.flaz-act{width:20px;height:20px;border:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.55rem;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 3px 7px rgba(0,0,0,.25);}
.flaz-act.del{background:#dc2626;}
.flaz-act.on{background:#22c55e;}
.flaz-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;color:#e2e8f0;}
.flaz-yes{color:#86efac;font-weight:900;}
.flaz-no{color:#94a3b8;font-weight:900;}
.flaz-empty,.flaz-mini-text{color:#94a3b8;font-size:.68rem;line-height:1.45;}
.flaz-pre{background:#020617!important;color:#cbd5e1!important;border:1px solid rgba(148,163,184,.1);border-radius:10px;padding:.72rem;font-size:.62rem;overflow-x:auto;}
.theme-light .flaz-card,.theme-light .flaz-accordion,.theme-light .flaz-pack{background:#fff!important;box-shadow:6px 6px 12px #d1d5db,-6px -6px 12px #fff!important;}
.theme-light .flaz-check-form input,.theme-light .flaz-auth-form input,.theme-light .flaz-search,.theme-light .flaz-date,.theme-light .flaz-refresh,.theme-light .flaz-table-wrap,.theme-light .flaz-two-btn button,.theme-light .flaz-two-btn a{background:#f8fafc!important;color:#1e293b!important;box-shadow:inset 3px 3px 6px #d1d5db,inset -3px -3px 6px #fff!important;}
.theme-light .flaz-table td,.theme-light .flaz-table th,.theme-light .flaz-profile-grid b,.theme-light .flaz-table td b,.theme-light .flaz-number{color:#1e293b!important;}
.theme-light .flaz-profile-grid div,.theme-light .flaz-empty,.theme-light .flaz-mini-text,.theme-light .flaz-table td small{color:#64748b!important;}

/* Product dropdown/status for Akrab/Circle manager */
.xl-product-hint{display:flex;flex-direction:column;gap:.15rem;border-radius:14px;background:rgba(14,165,233,.06);box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;padding:.72rem;color:#94a3b8;font-size:.68rem;line-height:1.45;}
.xl-product-hint b{color:#e2e8f0;font-size:.75rem;}
.xl-product-select{width:100%;min-width:165px;background:#0f172a;border:1px solid rgba(148,163,184,.14);border-radius:10px;color:#e2e8f0;font-size:.65rem;font-weight:800;padding:.42rem .55rem;outline:none;box-shadow:inset 3px 3px 6px #060a12,inset -3px -3px 6px #182442;}
.xl-product-pill{display:inline-flex;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;padding:.18rem .45rem;background:rgba(34,197,94,.14);color:#86efac;font-size:.58rem;font-weight:900;}
.xl-product-pill.off{background:rgba(148,163,184,.12);color:#94a3b8;}
.theme-light .xl-product-hint,.theme-light .xl-product-select{background:#f8fafc!important;box-shadow:inset 3px 3px 6px #d1d5db,inset -3px -3px 6px #fff!important;color:#1e293b!important;}
.theme-light .xl-product-hint b{color:#1e293b!important;}

/* --- Video parity additions: XL Akrab/Circle modal + massal set product --- */
.xl-video-form label,.xl-inline-box label{display:block;color:#cbd5e1;font-size:12px;font-weight:800;margin-top:8px}
.xl-input-save{display:flex;align-items:center;gap:0;border:1px solid #3b5a86;border-radius:14px;overflow:hidden;background:#111827;margin-top:5px}
.xl-input-save input{flex:1;min-width:0;background:transparent;border:0;color:#f8fafc;padding:12px 14px;font-size:16px;font-weight:800;outline:0}
.xl-input-save button{width:48px;align-self:stretch;background:#0284c7;color:#00111f;border:0;font-size:20px;font-weight:900}
.xl-note.compact{margin:8px 0 10px 0;padding-left:0;list-style:none;font-size:12px;line-height:1.45}
.xl-dot{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;margin-right:8px;border:2px solid rgba(255,255,255,.18)}
.xl-dot.red{background:#ef4444}.xl-dot.green{background:#65a941}
.xl-textarea{width:100%;min-height:76px;background:#111827;border:1px solid #3b5a86;border-radius:14px;color:#f8fafc;padding:11px 13px;outline:0;margin-top:8px;font-size:13px}
.xl-submit.amber{background:linear-gradient(180deg,#d97706,#92400e);border-color:#f59e0b;color:#ffedd5}
.xl-actions.mini{gap:5px}.xl-actions.mini .xl-act{width:25px;height:25px;font-size:12px}
.xl-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px}
.xl-modal.show{display:flex}
.xl-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.78);backdrop-filter:blur(4px)}
.xl-modal-card{position:relative;width:min(440px,100%);background:#141414;border:1px solid #273a5f;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.7);padding:14px}
.xl-modal-head{display:flex;align-items:center;justify-content:space-between;color:#f8fafc;font-size:16px;font-weight:900;margin-bottom:8px}
.xl-modal-head button{border:0;background:#111827;color:#e2e8f0;border-radius:10px;width:34px;height:34px}
.xl-modal-sub{font-size:12px;color:#94a3b8;margin-bottom:10px}
.xl-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.xl-btn-close{background:#1f2937;color:#fca5a5;border:1px solid #7f1d1d;border-radius:12px;padding:10px 14px;font-size:12px;font-weight:900}
.xl-product-pill.off{color:#fca5a5;border-color:#7f1d1d;background:rgba(127,29,29,.18)}

/* --- Product CRUD + API docs additions --- */
.xl-product-crud{display:grid;grid-template-columns:.85fr 1.6fr .85fr .9fr auto;gap:.45rem;align-items:center;background:rgba(2,6,23,.28);border:1px solid rgba(56,189,248,.16);border-radius:14px;padding:.55rem;}
.xl-product-crud input{width:100%;background:#0b1220;border:1px solid rgba(148,163,184,.18);border-radius:10px;color:#e2e8f0;padding:.52rem .6rem;font-size:.72rem;outline:0;}
.xl-product-crud input[readonly]{opacity:.75;background:#111827;}
.xl-product-crud .xl-submit{padding:.55rem .72rem;white-space:nowrap;}
.xl-muted{font-size:.63rem;color:#64748b;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.flaz-api-menu{display:grid;gap:.5rem;margin-top:.75rem;}
.flaz-api-menu a{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#0f1a2d,#09111f);border:1px solid rgba(56,189,248,.18);border-radius:13px;color:#e2e8f0;padding:.7rem .8rem;font-size:.78rem;font-weight:900;}
.flaz-api-menu a.active{border-color:rgba(34,197,94,.45);box-shadow:0 0 0 1px rgba(34,197,94,.12) inset;}
.flaz-api-grid{display:grid;grid-template-columns:1fr;gap:.75rem;}
.flaz-endpoint{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#050b14;border:1px solid rgba(56,189,248,.18);border-radius:12px;padding:.7rem;color:#7dd3fc;font-size:.72rem;word-break:break-all;}
.flaz-code{white-space:pre-wrap;background:#050b14;border:1px solid rgba(148,163,184,.16);border-radius:12px;padding:.85rem;color:#d1fae5;font-size:.68rem;overflow-x:auto;}
@media(max-width:720px){.xl-product-crud{grid-template-columns:1fr 1fr}.xl-product-crud .xl-submit{grid-column:1/-1}}

/* --- Akrab manager/member split + auto-kick UI --- */
.xl-toggle-pair{display:flex;align-items:center;gap:.35rem;}
.xl-toggle-pair .xl-act{opacity:.45;transform:scale(.96);transition:all .18s ease;}
.xl-toggle-pair .xl-act.is-active{opacity:1;transform:scale(1.02);box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 14px rgba(56,189,248,.22);}
.xl-mini-member-list{display:grid;gap:.45rem;margin-top:.45rem;}
.xl-mini-member-item{display:flex;align-items:center;gap:.55rem;background:rgba(2,6,23,.3);border:1px solid rgba(148,163,184,.08);border-radius:12px;padding:.48rem .56rem;}
.xl-mini-member-item.empty{opacity:.85;}
.xl-mini-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;color:#e2e8f0;white-space:nowrap;}
.xl-info-grid.compact-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:640px){.xl-info-grid.compact-2{grid-template-columns:1fr 1fr;}}

/* --- Circle manager/member split + kouta product table --- */
.xl-kouta-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.2rem .45rem;background:rgba(14,165,233,.14);color:#7dd3fc;font-size:.58rem;font-weight:900;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
#circle-member-table .xl-product-select{min-width:190px;margin-bottom:.28rem;}
#circle-member-table .xl-product-pill{display:inline-flex;max-width:210px;}

/* Auth XL session: OTP/session click langsung tampil pulsa, masa aktif, paket */
.flaz-number-btn{border:0;background:transparent;padding:0;cursor:pointer;text-decoration:none;}
.flaz-number-btn:hover{color:#7dd3fc;text-decoration:underline;}
.auth-session-card{padding:0;overflow:hidden;}
.auth-number-head{background:linear-gradient(180deg,#0b8bd0,#075985)!important;}
.auth-pack-section .flaz-pack-body{display:none;}
.auth-pack-section .flaz-pack-body.show{display:block;}
#auth-message .xl-flash{margin:.55rem 0;}

/* --- Akrab manager table v9: slot/pulsa/aktif/product/auto-kick --- */
.xl-play-btn{border:none;border-radius:999px;padding:.22rem .52rem;font-size:.58rem;font-weight:900;display:inline-flex;align-items:center;gap:.28rem;color:#fff;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 3px 8px rgba(0,0,0,.25)}
.xl-play-btn.on{background:#16a34a}.xl-play-btn.off{background:#dc2626}
.xl-random-grid{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}.akrab-cycle-panel{display:none}.akrab-cycle-panel.show{display:block}
.xl-mini-member-item{border:none;width:100%;text-align:left;cursor:pointer}.xl-mini-member-item:hover{filter:brightness(1.08)}
.xl-form-grid.ajax-autokick-form{grid-template-columns:1fr 1fr auto}.xl-form-grid.ajax-autokick-form input[type=time]{min-height:39px}
@media(max-width:720px){.xl-form-grid.ajax-autokick-form{grid-template-columns:1fr}.xl-table{min-width:820px}}

/* OTP account picker for Akrab/Circle + buttons */
.xl-field-note{display:block;margin-top:.3rem;color:#94a3b8;font-size:.6rem;line-height:1.35;text-transform:none;letter-spacing:0;font-weight:700;}
.xl-warn-line{margin-top:.5rem!important;color:#fcd34d!important;font-weight:900;}
.xl-form-grid select.xl-product-select{margin-top:.28rem;min-width:0;font-size:.72rem;padding:.58rem .65rem;}


/* Active XL number state */
.topbar-active-number{background:rgba(16,185,129,.10)!important;border-color:rgba(16,185,129,.22)!important;}
.topbar-deactivate{display:inline-flex;margin:0;}
.auth-inactive-card b{color:#e2e8f0;}
.theme-light .auth-inactive-card b{color:#1e293b;}

/* Akrab slot badge clickable: 3/3 merah/hijau buka Set Product jualan */
.xl-slot-click{border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.28);}
.xl-slot-click:hover{filter:brightness(1.12);transform:translateY(-1px);}


/* --- v19 FULL HD responsive khusus XL AKRAB / XL Circle --- */
/* Lebar halaman dibuat penuh, tapi ukuran tulisan/tombol tetap kecil rapi agar nama panjang tidak rusak. */
.xl-manager{
  width:100%;
  max-width:none;
  margin:0 0 2rem;
}
.xl-manager .xl-hero,
.xl-manager .xl-panel{
  width:100%;
}
.xl-manager .xl-hero{
  padding:.9rem 1rem;
  border-radius:16px;
}
.xl-manager .xl-hero h1{
  font-size:clamp(1.05rem,2.6vw,1.28rem);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.xl-manager .xl-hero p{
  font-size:clamp(.66rem,1.8vw,.74rem);
  max-width:56rem;
}
.xl-manager .xl-accordion-head{
  padding:.78rem .85rem;
  font-size:.76rem;
}
.xl-manager .xl-accordion-body{
  padding:.72rem .75rem .9rem;
}
.xl-manager .xl-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.xl-manager .xl-table{
  min-width:760px;
  font-size:.66rem;
}
.xl-manager .xl-table.small{
  min-width:560px;
}
.xl-manager .xl-table th{
  padding:.62rem .46rem;
  font-size:.58rem;
  letter-spacing:.06em;
}
.xl-manager .xl-table td{
  padding:.46rem .42rem;
}
.xl-manager .xl-number,
.xl-manager .xl-slot,
.xl-manager .xl-kouta-pill,
.xl-manager .xl-product-pill,
.xl-manager .xl-type,
.xl-manager .xl-date,
.xl-manager .xl-status{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.xl-manager .xl-number{
  font-size:.6rem;
  padding:.2rem .42rem;
}
.xl-manager .xl-act{
  width:24px;
  height:24px;
  font-size:.62rem;
}
.xl-manager .xl-info-grid{
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
}
.xl-manager .xl-info-card b,
.xl-manager .xl-detail-title,
.xl-manager .xl-product-row b{
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (min-width:1280px){
  .xl-manager .xl-table{min-width:100%;}
  .xl-manager .xl-table.small{min-width:100%;}
}

@media (max-width:640px){
  main .xl-manager{
    margin-left:-.25rem;
    margin-right:-.25rem;
    width:calc(100% + .5rem);
  }
  .xl-manager .xl-hero{
    border-radius:14px;
    padding:.78rem .78rem;
    gap:.55rem;
  }
  .xl-manager .xl-hero h1{
    font-size:1.05rem;
  }
  .xl-manager .xl-hero p{
    font-size:.64rem;
    line-height:1.28;
  }
  .xl-manager .xl-refresh{
    width:36px;
    height:36px;
    flex:0 0 auto;
  }
  .xl-manager .xl-panel{
    border-radius:13px;
    margin:.55rem 0;
  }
  .xl-manager .xl-accordion-head{
    padding:.68rem .68rem;
    font-size:.72rem;
  }
  .xl-manager .xl-accordion-body{
    padding:.58rem .58rem .75rem;
  }
  .xl-manager .xl-tools{
    gap:.35rem;
    margin-bottom:.55rem;
  }
  .xl-manager .xl-search{
    padding:.46rem .55rem;
    border-radius:12px;
  }
  .xl-manager .xl-search input{
    font-size:.68rem;
  }
  .xl-manager .xl-icon-btn{
    width:32px;
    height:32px;
    border-radius:10px;
  }
  .xl-manager .xl-table{
    min-width:690px;
    font-size:.61rem;
  }
  .xl-manager .xl-table.small{
    min-width:540px;
  }
  .xl-manager .xl-table th{
    padding:.52rem .36rem;
    font-size:.53rem;
  }
  .xl-manager .xl-table td{
    padding:.38rem .34rem;
  }
  .xl-manager .xl-act{
    width:22px;
    height:22px;
    font-size:.58rem;
  }
  .xl-manager .xl-actions{
    gap:.18rem;
  }
  .xl-manager .xl-number{
    font-size:.56rem;
    padding:.18rem .34rem;
  }
  .xl-manager .xl-slot,
  .xl-manager .xl-kouta-pill,
  .xl-manager .xl-product-pill,
  .xl-manager .xl-type,
  .xl-manager .xl-date,
  .xl-manager .xl-status{
    font-size:.54rem;
    padding:.15rem .34rem;
    max-width:145px;
  }
  .xl-manager .xl-product-select{
    min-width:135px;
    font-size:.58rem;
    padding:.35rem .42rem;
  }
  #circle-member-table .xl-product-select{
    min-width:145px;
  }
  .xl-manager .xl-modal{
    padding:8px;
  }
  .xl-manager .xl-modal-card{
    width:100%;
    max-height:92vh;
    overflow:auto;
  }
}

/* --- v20 mobile stability fix: modal gelap + detail tidak makan layar --- */
html,body{max-width:100%;overflow-x:hidden;}
.xl-manager{overflow-x:hidden;}
.xl-manager .xl-table-wrap{overflow-x:auto;overflow-y:hidden;}

/* Input modal paksa dark mode supaya tidak putih di Android/Chrome */
.xl-modal .xl-form-grid,
.xl-modal .xl-modal-form-compact{grid-template-columns:1fr!important;gap:.46rem!important;}
.xl-modal .xl-form-grid label,
.xl-modal .xl-modal-form-compact label{display:block!important;color:#94a3b8!important;font-size:.62rem!important;line-height:1.2!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin:0!important;}
.xl-modal .xl-form-grid input,
.xl-modal .xl-modal-form-compact input,
.xl-modal .xl-form-grid select,
.xl-modal .xl-modal-form-compact select,
.xl-modal .xl-form-grid textarea,
.xl-modal .xl-modal-form-compact textarea{width:100%!important;display:block!important;margin-top:.24rem!important;background:#0b1220!important;color:#e2e8f0!important;-webkit-text-fill-color:#e2e8f0!important;border:1px solid rgba(148,163,184,.20)!important;border-radius:11px!important;box-shadow:inset 2px 2px 5px #050914,inset -2px -2px 5px #172036!important;padding:.55rem .65rem!important;font-size:.76rem!important;font-weight:800!important;outline:none!important;min-height:38px!important;}
.xl-modal .xl-form-grid input::placeholder,
.xl-modal .xl-modal-form-compact input::placeholder{color:#94a3b8!important;-webkit-text-fill-color:#94a3b8!important;opacity:.78!important;}
.xl-modal input:-webkit-autofill,
.xl-modal input:-webkit-autofill:hover,
.xl-modal input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #0b1220 inset!important;-webkit-text-fill-color:#e2e8f0!important;caret-color:#e2e8f0!important;}
.xl-modal .xl-field-note{font-size:.58rem!important;line-height:1.25!important;margin-top:.23rem!important;color:#94a3b8!important;text-transform:none!important;letter-spacing:0!important;}
.xl-modal .xl-inline-box{padding:.58rem!important;margin:.45rem 0 .6rem!important;border-radius:12px!important;font-size:.66rem!important;}
.xl-modal .xl-inline-box p{font-size:.62rem!important;line-height:1.32!important;}
.xl-modal .xl-modal-sub{font-size:.64rem!important;line-height:1.25!important;}
.xl-modal .xl-modal-head{font-size:.86rem!important;margin-bottom:.5rem!important;}
.xl-modal .xl-modal-actions{display:grid!important;grid-template-columns:.78fr 1.22fr!important;gap:.5rem!important;margin-top:.65rem!important;}
.xl-modal .xl-btn-close,
.xl-modal .xl-submit{min-height:38px!important;border-radius:12px!important;font-size:.68rem!important;padding:.55rem .62rem!important;white-space:nowrap!important;}

@media (max-width:640px){
  /* Jangan terlalu maju ke kiri/kanan; table saja yang boleh geser */
  main .xl-manager{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important;}
  .xl-manager .xl-panel{margin:.5rem 0!important;border-radius:13px!important;}
  .xl-manager .xl-accordion-body{padding:.5rem .5rem .65rem!important;}
  .xl-manager .xl-hero{padding:.7rem .72rem!important;}
  .xl-manager .xl-table{min-width:650px!important;}
  .xl-manager .xl-table.small{min-width:500px!important;}

  /* Detail klik tetap bisa scroll/geser, tapi tidak memakan 1 layar penuh */
  .xl-manager .xl-detail-row > td{padding:.35rem!important;}
  .xl-manager .xl-detail-card{padding:.55rem!important;border-radius:12px!important;max-height:46vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;}
  .xl-manager .xl-detail-head{gap:.45rem!important;margin-bottom:.5rem!important;}
  .xl-manager .xl-detail-title{font-size:.72rem!important;line-height:1.22!important;}
  .xl-manager .xl-detail-title small{font-size:.58rem!important;}
  .xl-manager .xl-detail-sub{font-size:.58rem!important;line-height:1.25!important;}
  .xl-manager .xl-inline-box{padding:.55rem!important;margin:.42rem 0 .55rem!important;}
  .xl-manager .xl-inline-box p{font-size:.6rem!important;line-height:1.3!important;}
  .xl-manager .xl-quota-list{gap:.4rem!important;margin:.45rem 0!important;}
  .xl-manager .xl-meter-label{font-size:.62rem!important;margin-bottom:.22rem!important;}
  .xl-manager .xl-meter-label b{font-size:.58rem!important;}
  .xl-manager .xl-meter-track{height:7px!important;}
  .xl-manager .xl-detail-actions{gap:.36rem!important;margin-top:.5rem!important;}
  .xl-manager .xl-submit{min-height:35px!important;font-size:.62rem!important;padding:.5rem .62rem!important;}

  /* Modal add anggota tidak putih dan tidak menekan halaman */
  .xl-modal{padding:10px!important;align-items:flex-start!important;padding-top:64px!important;}
  .xl-modal .xl-modal-card{width:min(94vw,420px)!important;max-height:78vh!important;overflow-y:auto!important;border-radius:15px!important;padding:12px!important;}
}

/* --- v21 Flazdata-style saved pengelola list --- */
#circle-create-form{display:none;}
#circle-create-form.show{display:grid;}
.xl-manager .xl-table a.xl-number,
.xl-manager .xl-table a.xl-slot{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.xl-manager .xl-act[disabled],
.xl-manager button[disabled].xl-number{opacity:.55;filter:grayscale(.25);cursor:not-allowed;}
@media (max-width:640px){
  #akrab-saved-manager-table,
  #circle-saved-manager-table{min-width:520px!important;}
  #akrab-saved-manager-table .xl-number,
  #circle-saved-manager-table .xl-number{font-size:.62rem!important;}
}

/* --- v25 compact manager popup + riwayat API + set kuota otomatis --- */
.xl-auto-quota-box{
  margin:.55rem 0 0;
  border:1px solid rgba(34,211,238,.28);
  background:linear-gradient(180deg,rgba(14,165,233,.13),rgba(15,23,42,.88));
  border-radius:13px;
  padding:.62rem .72rem;
  color:#c7d2fe;
  display:grid;
  gap:.2rem;
}
.xl-auto-quota-box b{color:#93c5fd;font-size:.76rem;letter-spacing:.02em;}
.xl-auto-quota-box span{font-size:.67rem;color:#cbd5e1;line-height:1.32;}
.api-history-table{min-width:920px!important;}
.api-history-table td{font-size:.64rem;vertical-align:top;}
.api-history-table td:last-child{max-width:360px;white-space:normal;line-height:1.3;color:#cbd5e1;}

@media (min-width:821px){
  .xl-detail-row[id^="manager-detail-"].show-row > td,
  .xl-detail-row[id^="circle-owner-detail-"].show-row > td{
    position:fixed!important;
    right:28px!important;
    top:96px!important;
    width:min(720px,calc(100vw - 360px))!important;
    max-height:calc(100vh - 128px)!important;
    z-index:1200!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .xl-detail-row[id^="manager-detail-"].show-row .xl-detail-card,
  .xl-detail-row[id^="circle-owner-detail-"].show-row .xl-detail-card{
    max-height:calc(100vh - 128px)!important;
    overflow:auto!important;
    border:1px solid rgba(59,130,246,.75)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 0 1px rgba(14,165,233,.18)!important;
    background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98))!important;
    border-radius:16px!important;
    padding:.9rem!important;
  }
  .xl-detail-row[id^="manager-detail-"].show-row,
  .xl-detail-row[id^="circle-owner-detail-"].show-row{height:0!important;}
  .xl-detail-row[id^="manager-detail-"].show-row::before,
  .xl-detail-row[id^="circle-owner-detail-"].show-row::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.12);
    z-index:1190;
    pointer-events:none;
  }
}

@media (max-width:820px){
  .xl-detail-row[id^="manager-detail-"].show-row > td,
  .xl-detail-row[id^="circle-owner-detail-"].show-row > td{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:88px!important;
    z-index:1200!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .xl-detail-row[id^="manager-detail-"].show-row .xl-detail-card,
  .xl-detail-row[id^="circle-owner-detail-"].show-row .xl-detail-card{
    max-height:58vh!important;
    overflow:auto!important;
    border:1px solid rgba(59,130,246,.78)!important;
    box-shadow:0 -18px 50px rgba(0,0,0,.62),0 0 0 1px rgba(14,165,233,.18)!important;
    background:linear-gradient(180deg,rgba(15,23,42,.99),rgba(2,6,23,.99))!important;
    border-radius:16px!important;
    padding:.65rem!important;
  }
  .api-history-table{min-width:760px!important;}
}

/* --- v26 Riwayat API Manager dipisah dari Akrab/Circle --- */
.api-history-page .api-history-card{
  text-decoration:none!important;
  cursor:pointer;
  border:1px solid rgba(59,130,246,.22);
}
.api-history-page .api-history-card.active,
.api-history-page .api-history-card:hover{
  border-color:rgba(34,211,238,.75)!important;
  box-shadow:0 0 0 1px rgba(34,211,238,.12),0 12px 32px rgba(14,165,233,.14)!important;
}
.api-history-page .api-history-table{min-width:1040px!important;}


/* v27: angka STOK menjadi tombol ON/OFF jual, bukan tombol baru */
.xl-stock-form{display:inline;margin:0;padding:0;}
.xl-stock.stock-toggle{border:0;cursor:pointer;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 1px rgba(34,197,94,.35),0 8px 18px rgba(0,0,0,.28);}
.xl-stock.stock-toggle:hover{transform:translateY(-1px);filter:brightness(1.12);}
.xl-stock.off{background:#3f1d22!important;color:#fecaca!important;box-shadow:0 0 0 1px rgba(239,68,68,.35),0 8px 18px rgba(0,0,0,.25)!important;}
.xl-stock.stock-toggle.off::after{content:'';}

/* --- v30 flazdata-like compact popup for Akrab/Circle manager click --- */
.flaz-popup-card{padding:.75rem!important;border-radius:16px!important;max-width:100%!important;}
.flaz-popup-head{gap:.6rem!important;align-items:flex-start!important;position:sticky;top:0;z-index:3;background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.84));padding-bottom:.45rem;border-bottom:1px solid rgba(148,163,184,.12);}
.flaz-popup-head .xl-copy{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0!important;}
.flaz-popup-summary{display:flex;flex-wrap:wrap;gap:.38rem;margin:.5rem 0 .62rem;align-items:center;}
.flaz-kolam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;}
.flaz-kolam-card{border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.92));border-radius:14px;padding:.55rem;display:flex;flex-direction:column;gap:.42rem;min-width:0;}
.flaz-kolam-card.fresh{border-color:rgba(34,197,94,.55);box-shadow:inset 0 0 0 1px rgba(34,197,94,.08);}
.flaz-kolam-card.filled{border-color:rgba(239,68,68,.40);box-shadow:inset 0 0 0 1px rgba(239,68,68,.05);}
.flaz-kolam-card.error{border-color:rgba(239,68,68,.55);background:linear-gradient(180deg,rgba(127,29,29,.28),rgba(2,6,23,.92));}
.flaz-kolam-top{display:flex;justify-content:space-between;align-items:center;gap:.3rem;}
.flaz-kolam-number{font-size:.78rem;font-weight:900;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.flaz-kolam-number.muted{color:#fca5a5;white-space:normal;}
.flaz-kolam-note{font-size:.62rem;color:#94a3b8;line-height:1.28;min-height:2em;}
.flaz-kolam-card .xl-product-select{height:34px!important;min-height:34px!important;font-size:.68rem!important;padding:.38rem .5rem!important;border-radius:10px!important;}
.flaz-kolam-card .xl-submit{width:100%;min-height:34px!important;font-size:.64rem!important;padding:.42rem .55rem!important;border-radius:10px!important;}
.xl-auto-quota-box.compact{padding:.42rem .52rem!important;margin:.05rem 0!important;border-radius:10px!important;gap:.1rem!important;}
.xl-auto-quota-box.compact b{font-size:.63rem!important;}
.xl-auto-quota-box.compact span{font-size:.6rem!important;}
.flaz-actions-row{display:grid;gap:.35rem;}
.flaz-quota-form{display:grid;grid-template-columns:1fr auto;gap:.35rem;align-items:center;}
.flaz-quota-form input{min-height:34px!important;width:100%!important;background:#0b1220!important;color:#e2e8f0!important;border:1px solid rgba(148,163,184,.2)!important;border-radius:10px!important;padding:.35rem .48rem!important;font-size:.68rem!important;}
.flaz-quota-form .xl-submit{width:auto!important;}
.flaz-popup-note{margin-top:.6rem;border:1px solid rgba(14,165,233,.25);background:rgba(14,165,233,.09);border-radius:12px;padding:.5rem .58rem;color:#cbd5e1;font-size:.66rem;line-height:1.35;}
.flaz-circle-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.55rem 0;}
.flaz-circle-toolbar .xl-submit{min-height:36px!important;font-size:.66rem!important;padding:.45rem .6rem!important;text-align:center;}
.compact-popup-table{max-height:38vh;overflow:auto;border-radius:12px;}
.compact-popup-table .xl-table{min-width:560px!important;}
.compact-popup-table td,.compact-popup-table th{font-size:.62rem!important;padding:.42rem .45rem!important;}

@media (min-width:821px){
  .xl-detail-row[id^="manager-detail-"].show-row > td{width:min(860px,calc(100vw - 330px))!important;right:22px!important;top:88px!important;}
  .xl-detail-row[id^="circle-owner-detail-"].show-row > td{width:min(780px,calc(100vw - 330px))!important;right:22px!important;top:88px!important;}
}
@media (max-width:820px){
  .flaz-kolam-grid{display:grid;grid-template-columns:1fr;gap:.45rem;}
  .flaz-kolam-card{padding:.5rem!important;gap:.35rem!important;}
  .flaz-popup-summary{gap:.28rem;margin:.4rem 0 .5rem;}
  .flaz-popup-summary .xl-product-pill,.flaz-popup-summary .xl-status,.flaz-popup-summary .xl-kouta-pill,.flaz-popup-summary .xl-slot-pill{font-size:.58rem!important;padding:.24rem .38rem!important;}
  .flaz-kolam-number{font-size:.7rem!important;}
  .flaz-kolam-note{font-size:.57rem!important;min-height:0!important;}
  .flaz-circle-toolbar{grid-template-columns:1fr;gap:.35rem;}
  .compact-popup-table{max-height:34vh;}
  .xl-detail-row[id^="manager-detail-"].show-row .xl-detail-card,
  .xl-detail-row[id^="circle-owner-detail-"].show-row .xl-detail-card{max-height:62vh!important;padding:.55rem!important;}
}


/* v34: stok 0 tetap tombol angka ON/OFF, tidak ada tombol tambahan */
.xl-stock.stock-toggle{min-width:34px;border:0!important;}
.xl-stock.stock-toggle.off::after{content:''!important;}

/* v35: klik angka SLOT Akrab (2/3, 3/3) langsung buka popup Kolam Product untuk jual H2H */
.xl-slot-click{cursor:pointer;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 7px 18px rgba(0,0,0,.28);}
.xl-slot-click:hover{filter:brightness(1.12);transform:translateY(-1px);}
@media (min-width:821px){
  .xl-detail-row[id^="manager-slot-product-"].show-row > td{
    position:fixed!important;
    right:22px!important;
    top:88px!important;
    width:min(900px,calc(100vw - 330px))!important;
    max-height:calc(100vh - 126px)!important;
    z-index:1210!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .xl-detail-row[id^="manager-slot-product-"].show-row .xl-detail-card{
    max-height:calc(100vh - 126px)!important;
    overflow:auto!important;
    border:1px solid rgba(34,197,94,.62)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 0 1px rgba(34,197,94,.18)!important;
    background:linear-gradient(180deg,rgba(15,23,42,.99),rgba(2,6,23,.99))!important;
    border-radius:16px!important;
    padding:.85rem!important;
  }
  .xl-detail-row[id^="manager-slot-product-"].show-row{height:0!important;}
  .xl-detail-row[id^="manager-slot-product-"].show-row::before{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.10);z-index:1200;pointer-events:none;
  }
}
@media (max-width:820px){
  .xl-detail-row[id^="manager-slot-product-"].show-row > td{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:88px!important;
    z-index:1210!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .xl-detail-row[id^="manager-slot-product-"].show-row .xl-detail-card{
    max-height:62vh!important;
    overflow:auto!important;
    border:1px solid rgba(34,197,94,.72)!important;
    box-shadow:0 -18px 50px rgba(0,0,0,.64),0 0 0 1px rgba(34,197,94,.18)!important;
    background:linear-gradient(180deg,rgba(15,23,42,.99),rgba(2,6,23,.99))!important;
    border-radius:16px!important;
    padding:.58rem!important;
  }
}

/* v36: AKTIF jadi tombol cek pulsa, dan daftar pengelola urut fresh/perpanjang/pulsa terbesar */
.xl-inline-form{display:inline-flex;align-items:center;margin:0;padding:0;vertical-align:middle;}
.xl-inline-form .xl-icon-btn{border:0;cursor:pointer;}
.xl-pulsa-btn{border:0;cursor:pointer;white-space:nowrap;}
.xl-pulsa-btn:hover,.xl-play-btn[type="submit"]:hover{filter:brightness(1.12);transform:translateY(-1px);}

/* v37: PULSA header/cell menjadi tombol cek pulsa tanpa ikon tambahan */
.xl-th-btn{border:0;background:transparent;color:#93c5fd;font:inherit;font-weight:900;letter-spacing:.02em;cursor:pointer;padding:0;margin:0;text-transform:uppercase;}
.xl-th-btn:hover{text-decoration:underline;color:#bfdbfe;}
.xl-pulsa-btn{border:0;cursor:pointer;white-space:nowrap;}
.xl-pulsa-btn:hover{filter:brightness(1.12);transform:translateY(-1px);}


/* v38: tampilkan sisa masa aktif paket di popup anggota Akrab */
.xl-package-left{display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.28rem;border-radius:999px;background:rgba(14,165,233,.12);color:#7dd3fc;border:1px solid rgba(14,165,233,.24);padding:.25rem .55rem;font-size:.66rem;font-weight:900;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.xl-manager .xl-date{max-width:150px;}
@media (max-width:640px){.xl-package-left{font-size:.62rem;padding:.22rem .48rem}.xl-manager .xl-date{max-width:128px;}}


/* v39: pencarian nomor pengelola langsung dari input/paste nomor */
.xl-filter-input::placeholder{color:#64748b;opacity:1;}
.xl-search:focus-within{box-shadow:inset 3px 3px 7px #050913,inset -3px -3px 7px #1d2b47,0 0 0 1px rgba(14,165,233,.35)!important;}

/* v40: copy nomor bermasalah OTP ulang + Akrab perpanjang malam ini */
.xl-copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
.xl-copy-card{border:1px solid rgba(56,189,248,.22);background:rgba(2,6,23,.45);border-radius:16px;padding:.65rem;}
.xl-copy-head{display:flex;justify-content:space-between;gap:.6rem;align-items:center;font-size:.74rem;font-weight:900;color:#e2e8f0;margin-bottom:.45rem;}
.xl-copy-head b{background:#0ea5e9;color:white;border-radius:999px;padding:.12rem .45rem;min-width:28px;text-align:center;}
.xl-copy-card textarea{width:100%;min-height:82px;border:1px solid rgba(148,163,184,.22);background:#020617;color:#dbeafe;border-radius:12px;padding:.55rem;font-size:.76rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;resize:vertical;}
.xl-copy-card .xl-copy{margin-top:.45rem;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;}
.xl-actions.wrap{flex-wrap:wrap;}
.xl-submit.mini{min-height:34px;padding:.45rem .7rem;font-size:.72rem;border-radius:12px;}
.xl-submit.secondary{background:linear-gradient(135deg,#0369a1,#0f172a);}
@media (max-width:720px){.xl-copy-grid{grid-template-columns:1fr}.xl-copy-nomor-box{padding:.75rem!important}}

/* v42: Edit Jam Auto Kick dibuat kecil/compact */
.akrab-autokick-panel.compact{padding:.48rem .55rem!important;border-radius:16px!important;}
.akrab-autokick-panel.compact .xl-accordion-head.mini{min-height:34px;padding:.35rem .45rem!important;border-radius:12px!important;font-size:.78rem;gap:.35rem;}
.akrab-autokick-panel.compact .xl-accordion-head.mini span{font-weight:900;white-space:nowrap;}
.akrab-autokick-panel.compact .xl-accordion-head.mini small{margin-left:auto;margin-right:.35rem;color:#94a3b8;font-size:.64rem;font-weight:800;white-space:nowrap;}
.akrab-autokick-panel.compact .compact-body{padding:.38rem .25rem .15rem!important;}
.akrab-autokick-mini{display:flex;align-items:end;gap:.35rem;flex-wrap:wrap;background:rgba(2,6,23,.22);border:1px solid rgba(56,189,248,.16);border-radius:12px;padding:.35rem;}
.akrab-autokick-mini label{display:flex;flex-direction:column;gap:.12rem;color:#94a3b8;font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;}
.akrab-autokick-mini input[type="time"]{width:5.25rem;height:2rem;background:#0b1220;border:1px solid rgba(148,163,184,.2);border-radius:9px;color:#e2e8f0;padding:.25rem .38rem;font-size:.75rem;font-weight:900;outline:0;}
.akrab-autokick-mini .xl-submit.mini,.akrab-autokick-mini .xl-act{height:2rem;min-height:2rem;padding:.22rem .5rem!important;border-radius:9px!important;font-size:.66rem!important;line-height:1;}
.akrab-mini-arrow{color:#38bdf8;font-weight:900;padding-bottom:.45rem;}
.akrab-kick-now-mini{margin-top:.35rem;display:inline-flex;}
.akrab-kick-now-mini .xl-submit.mini{padding:.35rem .6rem!important;border-radius:10px!important;font-size:.68rem!important;}
.compact-note{display:block;margin-top:.28rem;font-size:.63rem!important;}
@media(max-width:720px){
  .akrab-autokick-panel.compact{padding:.4rem!important;margin:.45rem 0!important;}
  .akrab-autokick-panel.compact .xl-accordion-head.mini small{display:none;}
  .akrab-autokick-mini{gap:.25rem;padding:.3rem;}
  .akrab-autokick-mini input[type="time"]{width:4.85rem;height:1.85rem;font-size:.68rem;}
  .akrab-autokick-mini .xl-submit.mini,.akrab-autokick-mini .xl-act{height:1.85rem;min-height:1.85rem;padding:.18rem .42rem!important;font-size:.6rem!important;}
  .akrab-mini-arrow{padding-bottom:.38rem;}
}


/* v43: List Product dipindah ke halaman sendiri, tombol di halaman Akrab/Circle dibuat kecil */
.xl-product-shortcut{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:rgba(15,23,42,.58);border:1px solid rgba(56,189,248,.20);border-radius:18px;padding:12px 14px;}
.xl-product-shortcut b,.xl-product-page-head b{display:block;color:#f8fafc;font-weight:900;}
.xl-product-shortcut p,.xl-product-page-head p{margin:3px 0 0;color:#94a3b8;font-size:.82rem;line-height:1.35;}
.xl-product-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.product-page-panel .xl-product-crud{grid-template-columns:repeat(6,minmax(0,1fr));}
@media(max-width:720px){.xl-product-shortcut{padding:10px 11px}.product-page-panel .xl-product-crud{grid-template-columns:1fr 1fr}.product-page-panel .xl-product-crud button{grid-column:1/-1}.xl-product-page-head .xl-submit{width:100%;justify-content:center}}


/* v44: Auto Kick super kecil, paling atas, tanpa tombol Kick sekarang */
.akrab-autokick-strip-top{margin:.35rem 0 .45rem!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
.akrab-autokick-strip{display:flex;align-items:center;gap:.28rem;flex-wrap:nowrap;width:100%;min-height:32px;padding:.26rem .38rem;border:1px solid rgba(56,189,248,.18);border-radius:12px;background:rgba(2,6,23,.42);overflow-x:auto;scrollbar-width:none;}
.akrab-autokick-strip::-webkit-scrollbar{display:none;}
.akrab-autokick-strip b{display:inline-flex;align-items:center;gap:.25rem;color:#e0f2fe;font-size:.68rem;font-weight:900;white-space:nowrap;margin-right:.05rem;}
.akrab-autokick-strip label{display:inline-flex;align-items:center;gap:.2rem;color:#94a3b8;font-size:.56rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;}
.akrab-autokick-strip input[type="time"]{width:4.25rem;height:1.55rem;background:#0b1220;border:1px solid rgba(148,163,184,.22);border-radius:8px;color:#e2e8f0;padding:.08rem .18rem;font-size:.62rem;font-weight:900;outline:0;}
.akrab-autokick-strip>span{color:#38bdf8;font-weight:900;font-size:.7rem;}
.akrab-autokick-strip .xl-submit.mini{height:1.55rem;min-height:1.55rem;padding:.12rem .42rem!important;border-radius:8px!important;font-size:.58rem!important;line-height:1;white-space:nowrap;}
@media(max-width:720px){.akrab-autokick-strip-top{margin:.22rem 0 .34rem!important}.akrab-autokick-strip{min-height:28px;padding:.2rem .3rem;gap:.2rem;border-radius:10px}.akrab-autokick-strip b{font-size:.58rem}.akrab-autokick-strip label{font-size:.48rem}.akrab-autokick-strip input[type="time"]{width:3.75rem;height:1.38rem;font-size:.55rem;border-radius:7px}.akrab-autokick-strip .xl-submit.mini{height:1.38rem;min-height:1.38rem;font-size:.5rem!important;padding:.1rem .32rem!important}.akrab-autokick-strip .xl-submit.mini i{display:none}}


/* v45: warna baris pengelola Akrab sesuai status slot */
.xl-table tr.xl-row-full td{background:linear-gradient(90deg,rgba(127,29,29,.34),rgba(69,10,10,.12))!important;border-bottom-color:rgba(248,113,113,.20)!important;}
.xl-table tr.xl-row-full .xl-number{color:#fecaca!important;text-shadow:0 0 10px rgba(239,68,68,.22);}
.xl-table tr.xl-row-full .xl-product-pill{background:#3f1d22!important;color:#fecaca!important;box-shadow:0 0 0 1px rgba(239,68,68,.35)!important;}
.xl-table tr.xl-row-warning td{background:linear-gradient(90deg,rgba(120,53,15,.24),rgba(69,26,3,.08))!important;border-bottom-color:rgba(251,191,36,.16)!important;}
.xl-table tr.xl-row-fresh td{background:linear-gradient(90deg,rgba(20,83,45,.16),rgba(6,78,59,.05))!important;}

/* v51: status logo Klaim Bonus Circle */
.xl-act.bonus-on,
.xl-submit.bonus-on{
  background:linear-gradient(135deg,#f59e0b,#facc15)!important;
  color:#111827!important;
  box-shadow:0 0 0 1px rgba(250,204,21,.45),0 0 16px rgba(250,204,21,.38),0 5px 14px rgba(0,0,0,.32)!important;
}
.xl-act.bonus-on i,
.xl-submit.bonus-on i{color:#111827!important;filter:drop-shadow(0 0 5px rgba(255,255,255,.5));}
.xl-act.bonus-off,
.xl-submit.bonus-off{
  background:#1f2937!important;
  color:#64748b!important;
  opacity:.45!important;
  filter:grayscale(1)!important;
  box-shadow:0 0 0 1px rgba(148,163,184,.16)!important;
  cursor:not-allowed!important;
}
.xl-act.bonus-off{pointer-events:none;}
.xl-submit.bonus-off[disabled]{pointer-events:none;}
.bonus-empty .fa-gift{opacity:.45;filter:grayscale(1);}

/* v52: Copy nomor bermasalah cukup 1 klik, tanpa monitor/textarea terlihat */
.compact-copy-box{padding:.62rem .72rem!important;}
.compact-copy-box p{margin:.18rem 0 .35rem!important;font-size:.72rem;color:#94a3b8;}
.xl-copy-mini-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;}
.xl-copy.one-tap{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:34px;padding:.4rem .65rem!important;cursor:pointer;}
.xl-copy.one-tap b{background:#0ea5e9;color:#fff;border-radius:999px;min-width:24px;padding:.08rem .35rem;font-size:.66rem;text-align:center;}
.xl-hidden-copy{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
@media(max-width:720px){.xl-copy-mini-actions{display:grid;grid-template-columns:1fr;}.xl-copy.one-tap{width:100%;}}

/* v54: Copy perpanjang malam ini monitor super mini, maksimal 3 baris nomor */
.v53-copy-tools{padding:.56rem .66rem!important;}
.v53-copy-tools .copy-tools-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;line-height:1.15;}
.v53-copy-tools .copy-tools-head b{font-size:.82rem;}
.v53-copy-tools .copy-tools-head small{font-size:.62rem;color:#94a3b8;text-align:right;max-width:220px;}
.renew-mini-monitor{border:1px solid rgba(14,165,233,.28);border-radius:14px;background:rgba(2,6,23,.36);padding:.42rem;}
.renew-mini-top{display:flex;align-items:center;justify-content:space-between;gap:.45rem;margin-bottom:.35rem;}
.renew-mini-top span{font-weight:900;color:#7dd3fc;font-size:.72rem;letter-spacing:.02em;}
.renew-copy-btn{min-height:28px!important;padding:.28rem .48rem!important;font-size:.68rem!important;}
.renew-mini-textarea{width:100%;height:58px!important;min-height:58px!important;max-height:58px!important;resize:none;overflow:auto;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:#050b18;color:#e5e7eb;font-size:.72rem;line-height:1.25;padding:.32rem .5rem;outline:none;}
.renew-mini-textarea::placeholder{color:#64748b;}
@media(max-width:720px){
  .v53-copy-tools .copy-tools-head{display:block;}
  .v53-copy-tools .copy-tools-head small{display:block;text-align:left;margin-top:.15rem;max-width:none;}
  .renew-mini-textarea{height:52px!important;min-height:52px!important;max-height:52px!important;font-size:.68rem;line-height:1.22;padding:.28rem .45rem;}
}


/* v57: Circle klik NUMBER langsung popup anggota tanpa reload halaman */
.circle-product-shortcut-top{margin-top:.55rem!important;margin-bottom:.55rem!important;}
.circle-live-popup{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:12px;}
.circle-live-popup.show{display:flex;}
.circle-live-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.68);backdrop-filter:blur(7px);}
.circle-live-box{position:relative;width:min(760px,96vw);max-height:88vh;overflow:auto;border-radius:24px;border:1px solid rgba(14,165,233,.52);background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98));box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 0 1px rgba(56,189,248,.18);padding:12px;}
.circle-live-close{position:sticky;top:0;float:right;z-index:3;width:38px;height:38px;border-radius:999px;background:#0f172a;color:#cbd5e1;border:1px solid rgba(148,163,184,.22);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.25);}
.circle-live-box .circle-manager-popup{border:0!important;box-shadow:none!important;background:transparent!important;padding:8px!important;}
.circle-loading-card{padding:18px!important;text-align:center;}
.circle-loading-card b{display:block;color:#7dd3fc;font-weight:900;margin-bottom:6px;}
.circle-loading-card p{color:#94a3b8;font-size:.82rem;}
[data-circle-open-number]{cursor:pointer;}
[data-circle-open-number].loading{opacity:.7;pointer-events:none;}
@media(max-width:720px){.circle-live-popup{align-items:center!important;justify-content:center!important;padding:10px!important}.circle-live-box{width:min(96vw,760px)!important;max-height:84vh;border-radius:18px!important;padding:8px;margin:auto!important}.circle-live-close{width:34px;height:34px}.circle-product-shortcut-top{margin-top:.35rem!important;margin-bottom:.42rem!important}}

/* v58: Akrab NUMBER/SLOT buka popup live tanpa refresh halaman */
.akrab-live-popup .akrab-manager-popup,
.akrab-live-popup #akrab-product-panel{border:0!important;box-shadow:none!important;background:transparent!important;padding:8px!important;}
.akrab-loading-card{min-height:120px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;}
[data-akrab-open-number].loading{opacity:.8;pointer-events:none;}

/* v60: tombol wajib terlihat di website: Auto Kick, ADD+SET KOUTA Akrab, ADD+ACC Circle */
.akrab-autokick-strip b em{font-style:normal;background:rgba(14,165,233,.22);border:1px solid rgba(56,189,248,.35);color:#7dd3fc;border-radius:999px;padding:.05rem .35rem;margin-left:.2rem;font-size:.58rem;}
.akrab-autokick-strip .xl-toggle-pair.compact{display:inline-flex;gap:.18rem;align-items:center;white-space:nowrap;}
.akrab-autokick-strip .xl-toggle-pair.compact .xl-act,.xl-toggle-pair.compact .xl-act{width:auto;min-width:32px;height:24px;border-radius:8px;padding:0 .36rem;font-size:.55rem;font-weight:1000;}
.akrab-row-autokick{display:flex;align-items:center;gap:.28rem;flex-wrap:wrap;min-width:138px;}
.akrab-row-autokick>b{font-size:.62rem;color:#e0f2fe;font-weight:1000;white-space:nowrap;}
.akrab-row-autokick .xl-submit.mini{height:24px;min-height:24px;padding:.1rem .42rem!important;font-size:.55rem!important;border-radius:8px!important;}
.add-set-quota-btn{white-space:nowrap;background:linear-gradient(135deg,#16a34a,#0284c7)!important;}
.xl-inline-add-form{grid-template-columns:1fr 1fr 92px auto!important;gap:.4rem!important;margin-top:.5rem;align-items:end;}
.xl-inline-add-form label{font-size:.62rem!important;font-weight:900;color:#94a3b8;}
.xl-inline-add-form input{min-height:34px!important;font-size:.75rem!important;padding:.36rem .55rem!important;}
.xl-inline-add-form .xl-submit{min-height:34px!important;padding:.42rem .62rem!important;font-size:.68rem!important;white-space:nowrap;}
.akrab-add-set-inline{grid-template-columns:1fr 1.15fr 82px!important;}
.akrab-add-set-inline .xl-submit{grid-column:1/-1;width:100%;justify-content:center;}
.circle-addacc-inline{margin:.55rem 0!important;border-color:rgba(34,197,94,.24)!important;}
.circle-addacc-inline p{font-size:.72rem!important;margin:.25rem 0 .35rem!important;color:#94a3b8!important;}
@media(max-width:720px){
  .akrab-row-autokick{min-width:118px;gap:.2rem;}
  .akrab-row-autokick>b{font-size:.55rem;}
  .akrab-autokick-strip .xl-toggle-pair.compact .xl-act,.xl-toggle-pair.compact .xl-act{min-width:27px;height:21px;font-size:.48rem;padding:0 .25rem;}
  .xl-inline-add-form,.akrab-add-set-inline{grid-template-columns:1fr!important;}
  .xl-inline-add-form .xl-submit{width:100%;justify-content:center;}
  .add-set-quota-btn{font-size:.58rem!important;padding:.3rem .46rem!important;}
  #akrab-saved-manager-table{min-width:1040px!important;}
  #circle-saved-manager-table{min-width:820px!important;}
}

/* v61: Auto Kick satu icon saja. Hijau=ON, merah=OFF. */
.xl-autokick-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:10px;font-size:.78rem;font-weight:1000;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.28);transition:transform .14s ease,filter .14s ease,background .14s ease,color .14s ease;}
.xl-autokick-icon:hover{transform:translateY(-1px);filter:brightness(1.08);}
.xl-autokick-icon.on{background:#14532d;color:#86efac;box-shadow:0 0 0 1px rgba(34,197,94,.42),0 8px 18px rgba(0,0,0,.28);}
.xl-autokick-icon.off{background:#3f1d22;color:#fecaca;box-shadow:0 0 0 1px rgba(239,68,68,.42),0 8px 18px rgba(0,0,0,.28);}
.akrab-autokick-cell{text-align:center!important;vertical-align:middle!important;}
.akrab-zero-rule{display:inline-flex;align-items:center;height:1.35rem;padding:0 .38rem;border-radius:999px;background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.28);color:#fecaca;font-size:.55rem;font-weight:1000;white-space:nowrap;}
.akrab-autokick-strip .xl-autokick-icon{width:24px;height:24px;border-radius:8px;font-size:.66rem;flex:0 0 auto;}
.xl-stock.stock-toggle:not(.off){background:#14532d!important;color:#86efac!important;}
@media(max-width:720px){.xl-autokick-icon{width:24px;height:24px;border-radius:8px;font-size:.66rem}.akrab-zero-rule{height:1.18rem;font-size:.48rem;padding:0 .28rem}.akrab-autokick-strip .xl-autokick-icon{width:21px;height:21px;font-size:.58rem}}

/* v66: pilih nomor Auth XL mana yang masuk Pengelola Akrab/Circle */
.akrab-manager-select-modal .xl-modal-card{max-width:680px;}
.akrab-manager-pick-list{display:grid;gap:.45rem;max-height:52vh;overflow:auto;padding:.1rem .05rem .25rem;scrollbar-width:thin;}
.akrab-manager-pick{display:flex;align-items:center;gap:.55rem;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.42);border-radius:14px;padding:.55rem .6rem;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease;}
.akrab-manager-pick:hover{transform:translateY(-1px);}
.akrab-manager-pick input{position:absolute;opacity:0;pointer-events:none;}
.akrab-manager-pick .pick-icon{width:30px;height:30px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:rgba(15,23,42,.72);}
.akrab-manager-pick .pick-main{min-width:0;display:flex;flex-direction:column;gap:.08rem;flex:1;}
.akrab-manager-pick .pick-main b{font-size:.86rem;color:#e5edf8;font-weight:1000;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.akrab-manager-pick .pick-main small{font-size:.64rem;color:#94a3b8;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.akrab-manager-pick .pick-state{border-radius:999px;padding:.18rem .46rem;font-size:.58rem;font-weight:1000;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;}
.akrab-manager-pick.on{border-color:rgba(34,197,94,.45);background:linear-gradient(135deg,rgba(20,83,45,.48),rgba(2,6,23,.55));box-shadow:0 0 0 1px rgba(34,197,94,.14),0 10px 26px rgba(0,0,0,.22);}
.akrab-manager-pick.on .pick-icon{color:#86efac;background:rgba(20,83,45,.7);}
.akrab-manager-pick.on .pick-state{color:#86efac;background:rgba(20,83,45,.82);border:1px solid rgba(34,197,94,.28);}
.akrab-manager-pick.off{border-color:rgba(239,68,68,.42);background:linear-gradient(135deg,rgba(63,29,34,.55),rgba(2,6,23,.55));}
.akrab-manager-pick.off .pick-icon{color:#fecaca;background:rgba(63,29,34,.8);}
.akrab-manager-pick.off .pick-state{color:#fecaca;background:rgba(63,29,34,.9);border:1px solid rgba(239,68,68,.28);}
.manager-select-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:.55rem;}
.manager-select-actions .xl-btn-close,.manager-select-actions .xl-submit{width:100%;min-height:2.45rem;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;}
@media(max-width:720px){.akrab-manager-pick-list{max-height:48vh;gap:.34rem}.akrab-manager-pick{border-radius:12px;padding:.46rem .48rem;gap:.42rem}.akrab-manager-pick .pick-icon{width:26px;height:26px;border-radius:9px}.akrab-manager-pick .pick-main b{font-size:.76rem}.akrab-manager-pick .pick-main small{font-size:.55rem}.akrab-manager-pick .pick-state{font-size:.48rem;padding:.15rem .34rem}.manager-select-actions{grid-template-columns:1fr;}}


/* v74: compact kolam anggota video fix START */
/* Akrab popup dibuat lebih kecil/rapi seperti video. Fungsi tombol/form tetap sama, hanya ukuran dan jarak dipadatkan. */
#akrab-member-panel.akrab-manager-popup,
.akrab-live-popup #akrab-member-panel.akrab-manager-popup{
  padding:7px!important;
  border-radius:14px!important;
  font-size:12px!important;
  line-height:1.22!important;
}
#akrab-member-panel .flaz-popup-head{
  gap:6px!important;
  padding:0 0 5px!important;
  margin:0 0 5px!important;
  border-bottom:1px solid rgba(148,163,184,.10)!important;
}
#akrab-member-panel .xl-package-left{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  width:auto!important;
  max-width:100%!important;
  min-height:0!important;
  margin:0 0 4px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:11px!important;
  line-height:1.15!important;
}
#akrab-member-panel .xl-detail-title{
  margin:0!important;
  font-size:14px!important;
  line-height:1.13!important;
  letter-spacing:.01em!important;
}
#akrab-member-panel .xl-detail-title small{
  display:block!important;
  margin-top:2px!important;
  font-size:11px!important;
  line-height:1.1!important;
  opacity:.82!important;
}
#akrab-member-panel .xl-detail-sub{
  margin-top:3px!important;
  font-size:11px!important;
  line-height:1.18!important;
  color:#94a3b8!important;
}
#akrab-member-panel .xl-copy,
.akrab-live-popup .akrab-live-close{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border-radius:999px!important;
  font-size:13px!important;
}
#akrab-member-panel .flaz-popup-summary{
  gap:4px!important;
  margin:4px 0 5px!important;
}
#akrab-member-panel .flaz-popup-summary .xl-product-pill,
#akrab-member-panel .flaz-popup-summary .xl-status,
#akrab-member-panel .flaz-popup-summary .xl-kouta-pill,
#akrab-member-panel .flaz-popup-summary .xl-slot-pill{
  font-size:10px!important;
  padding:2px 6px!important;
  min-height:0!important;
  line-height:1.25!important;
}
#akrab-member-panel .akrab-owner-quota-list,
#akrab-member-panel .xl-quota-list{
  display:grid!important;
  gap:4px!important;
  margin:4px 0 6px!important;
}
#akrab-member-panel .xl-meter{
  padding:5px 6px!important;
  border-radius:9px!important;
  margin:0!important;
}
#akrab-member-panel .xl-meter-label{
  gap:4px!important;
  font-size:10.5px!important;
  line-height:1.15!important;
}
#akrab-member-panel .xl-meter-label b,
#akrab-member-panel .xl-meter-label span{
  font-size:10.5px!important;
  line-height:1.15!important;
}
#akrab-member-panel .xl-meter-track{
  height:5px!important;
  margin-top:4px!important;
  border-radius:999px!important;
}
#akrab-member-panel .flaz-kolam-grid{
  grid-template-columns:1fr!important;
  gap:7px!important;
  margin-top:6px!important;
}
#akrab-member-panel .flaz-kolam-card{
  border-radius:12px!important;
  padding:7px 9px!important;
  gap:4px!important;
  min-height:0!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}
#akrab-member-panel .flaz-kolam-top{
  gap:6px!important;
  margin:0!important;
  min-height:0!important;
}
#akrab-member-panel .flaz-kolam-top .xl-slot,
#akrab-member-panel .xl-slot{
  min-height:0!important;
  height:auto!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:11px!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
}
#akrab-member-panel .flaz-kolam-top .xl-status,
#akrab-member-panel .xl-status{
  min-height:0!important;
  height:auto!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1.15!important;
}
#akrab-member-panel .flaz-kolam-number{
  margin:2px 0 0!important;
  font-size:12px!important;
  line-height:1.12!important;
  font-weight:900!important;
}
#akrab-member-panel .flaz-kolam-note{
  margin:0!important;
  min-height:0!important;
  font-size:10.5px!important;
  line-height:1.22!important;
}
#akrab-member-panel .flaz-kolam-card .xl-product-select{
  height:30px!important;
  min-height:30px!important;
  padding:3px 7px!important;
  border-radius:9px!important;
  font-size:11px!important;
}
#akrab-member-panel .xl-auto-quota-box.compact{
  padding:5px 7px!important;
  margin:0!important;
  border-radius:9px!important;
  gap:2px!important;
}
#akrab-member-panel .xl-auto-quota-box.compact b,
#akrab-member-panel .xl-auto-quota-box.compact span{
  font-size:10.5px!important;
  line-height:1.16!important;
}
#akrab-member-panel .flaz-kolam-card .xl-submit,
#akrab-member-panel .xl-submit{
  min-height:30px!important;
  padding:5px 8px!important;
  border-radius:9px!important;
  font-size:11px!important;
  line-height:1.15!important;
}
#akrab-member-panel .flaz-actions-row{
  gap:5px!important;
}
#akrab-member-panel .flaz-quota-form,
#akrab-owner-set-kuota-fix .flaz-quota-form,
#akrab-member-panel .akrab-owner-quota-direct{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
  align-items:center!important;
  margin:0!important;
}
#akrab-member-panel .flaz-quota-form input,
#akrab-owner-set-kuota-fix input,
#akrab-member-panel input,
#akrab-member-panel .xl-form-grid input{
  min-height:30px!important;
  height:30px!important;
  padding:4px 7px!important;
  border-radius:9px!important;
  font-size:11px!important;
  line-height:1.15!important;
}
#akrab-owner-set-kuota-fix,
#akrab-member-panel .akrab-owner-set-kuota{
  margin:5px 0 7px!important;
  padding:6px!important;
  border-radius:12px!important;
  gap:4px!important;
}
#akrab-owner-set-kuota-fix b,
#akrab-member-panel .akrab-owner-set-kuota b{
  font-size:11px!important;
  line-height:1.15!important;
}
#akrab-owner-set-kuota-fix p,
#akrab-member-panel .akrab-owner-set-kuota p{
  display:none!important;
}
#akrab-member-panel .xl-inline-add-form,
#akrab-member-panel .akrab-add-set-inline{
  grid-template-columns:1fr!important;
  gap:5px!important;
  margin-top:5px!important;
}
#akrab-member-panel .xl-inline-add-form label,
#akrab-member-panel .akrab-add-set-inline label{
  font-size:10.5px!important;
  line-height:1.15!important;
}
#akrab-member-panel .xl-field-note{
  font-size:9.5px!important;
  line-height:1.15!important;
  margin-top:2px!important;
}
#akrab-member-panel .flaz-popup-note{
  margin-top:8px!important;
  padding:7px 8px!important;
  border-radius:10px!important;
  font-size:10.8px!important;
  line-height:1.26!important;
}
@media(max-width:720px){
  .akrab-live-popup{padding:10px!important;align-items:center!important;justify-content:center!important;}
  .akrab-live-popup .circle-live-box,
  .akrab-live-popup .akrab-live-box,
  .akrab-live-popup > div:not(.circle-live-backdrop){width:min(96vw,760px)!important;max-height:84vh!important;border-radius:18px!important;padding:8px!important;margin:auto!important;}
  .xl-detail-row[id^="manager-detail-"].show-row .xl-detail-card{max-height:74vh!important;padding:7px!important;}
  #akrab-member-panel .flaz-kolam-grid{gap:6px!important;}
  #akrab-member-panel .flaz-kolam-card{padding:7px 8px!important;gap:4px!important;border-radius:11px!important;}
  #akrab-member-panel .flaz-kolam-note{font-size:10px!important;}
  #akrab-member-panel .flaz-popup-note{font-size:10.3px!important;padding:6px 7px!important;}
}
@media(max-width:380px){
  #akrab-member-panel{font-size:11px!important;}
  #akrab-member-panel .xl-detail-title{font-size:13px!important;}
  #akrab-member-panel .xl-detail-sub{font-size:10px!important;}
  #akrab-member-panel .flaz-kolam-number{font-size:11.3px!important;}
  #akrab-member-panel .flaz-kolam-note{font-size:9.8px!important;}
  #akrab-member-panel .flaz-kolam-card .xl-submit,
  #akrab-member-panel .xl-submit{font-size:10px!important;}
}
/* v74: compact kolam anggota video fix END */


/* ANH compact mode: hapus tulisan panduan/catatan agar halaman tidak makan ruang. */
.xl-note,
.xl-product-hint,
.compact-note,
.flaz-mini-text.api-long-note {
  display: none !important;
}
.xl-hero > div > p,
.flaz-blue-head + .flaz-card .flaz-mini-text:first-child {
  display: none !important;
}


/* v70: popup Akrab harus muncul di tengah layar HP, bukan bottom sheet */
.akrab-live-popup{align-items:center!important;justify-content:center!important;padding:10px!important;}
.akrab-live-popup.show{display:flex!important;}
.akrab-live-popup .akrab-live-box,.akrab-live-popup .circle-live-box{width:min(96vw,760px)!important;max-height:84vh!important;margin:auto!important;border-radius:18px!important;}
@media(max-width:720px){.akrab-live-popup{align-items:center!important;justify-content:center!important;padding:10px!important}.akrab-live-popup .akrab-live-box,.akrab-live-popup .circle-live-box{max-height:84vh!important;border-radius:18px!important;margin:auto!important}}


/* v75: Circle popup juga harus tampil tengah layar HP, bukan bottom sheet */
.circle-live-popup{align-items:center!important;justify-content:center!important;padding:10px!important;}
.circle-live-popup.show{display:flex!important;}
.circle-live-popup .circle-live-box{width:min(96vw,760px)!important;max-height:84vh!important;margin:auto!important;border-radius:18px!important;}
@media(max-width:720px){.circle-live-popup{align-items:center!important;justify-content:center!important;padding:10px!important}.circle-live-popup .circle-live-box{width:min(96vw,760px)!important;max-height:84vh!important;margin:auto!important;border-radius:18px!important}}

/* Pagination nomor pengelola Akrab/Circle: 10 nomor per halaman, tombol cukup 5 angka (1/2/3/4/5) */
.anh-pagebar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 12px;padding:7px 9px;border:1px solid rgba(148,163,184,.22);border-radius:13px;background:rgba(15,23,42,.32)}
.anh-page-info{font-size:11.5px;color:#94a3b8;font-weight:700;letter-spacing:.02em}
.anh-page-buttons{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.anh-page-buttons button{min-width:30px;height:30px;padding:0 8px;border:1px solid rgba(148,163,184,.26);border-radius:10px;background:rgba(15,23,42,.58);color:#e5e7eb;font-size:12px;font-weight:800;line-height:1;cursor:pointer}
.anh-page-buttons button.active{background:linear-gradient(135deg,#2563eb,#06b6d4);border-color:rgba(56,189,248,.62);color:white;box-shadow:0 8px 18px rgba(37,99,235,.22)}
.anh-page-buttons button:disabled{opacity:.35;cursor:not-allowed}
.anh-page-dot{font-size:12px;color:#64748b;padding:0 2px}
.akrab-manager-pick-list + .anh-pick-pager{margin-top:8px;margin-bottom:4px}
@media(max-width:720px){.anh-pagebar{justify-content:center}.anh-page-info{width:100%;text-align:center}.anh-page-buttons{justify-content:center}.anh-page-buttons button{min-width:28px;height:28px;border-radius:9px;font-size:11px}}


/* Akrab baru perpanjang / fresh: tampil beda dan prioritas paling atas */
.xl-table tr.xl-row-renew-new td{
  background:linear-gradient(90deg,rgba(8,145,178,.30),rgba(14,165,233,.08))!important;
  border-bottom-color:rgba(103,232,249,.28)!important;
}
.xl-date.renew-new{
  color:#67e8f9!important;
  font-weight:800!important;
  text-shadow:0 0 10px rgba(34,211,238,.20);
}
.akrab-renew-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 5px;
  margin-right:4px;
  border-radius:999px;
  font-style:normal;
  font-size:9px;
  font-weight:900;
  letter-spacing:.03em;
  color:#083344;
  background:#67e8f9;
  box-shadow:0 0 0 1px rgba(103,232,249,.25),0 0 12px rgba(34,211,238,.24);
  white-space:nowrap;
}