/* Backup inCloud · Matrix infrastructure design system */
:root,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bk-black: #030504;
  --bk-ink: #070b08;
  --bk-deep: #0b120e;
  --bk-panel: #101813;
  --bk-panel-2: #142019;
  --bk-elevated: #19251e;
  --bk-border: rgba(99, 255, 135, .16);
  --bk-border-strong: rgba(99, 255, 135, .32);
  --bk-green: #63ff87;
  --bk-green-strong: #28d968;
  --bk-lime: #a1ffb5;
  --bk-action: #087334;
  --bk-action-strong: #0b8a3e;
  --bk-action-hover: #09652f;
  --bk-green-soft: rgba(99, 255, 135, .1);
  --bk-text: #f2fff5;
  --bk-muted: #9cb4a3;
  --bk-subtle: #6f8976;
  --bk-danger: #ff6b7f;
  --bk-warning: #ffd166;
  --bk-info: #73d8ff;
  --bk-page: radial-gradient(circle at 78% 5%, rgba(40, 217, 104, .08), transparent 28%), #070b08;
  --bk-shadow: 0 20px 48px rgba(0, 0, 0, .28);
  --bk-shadow-soft: 0 12px 30px rgba(0, 0, 0, .18);
}

[data-bs-theme="light"] {
  color-scheme: light;
  --bk-black: #071009;
  --bk-ink: #f4f8f5;
  --bk-deep: #eaf1ec;
  --bk-panel: #ffffff;
  --bk-panel-2: #f7faf8;
  --bk-elevated: #edf4ef;
  --bk-border: rgba(16, 91, 42, .14);
  --bk-border-strong: rgba(16, 91, 42, .28);
  --bk-green: #087c32;
  --bk-green-strong: #075f29;
  --bk-lime: #0a8d3a;
  --bk-action: #087334;
  --bk-action-strong: #0b8a3e;
  --bk-action-hover: #09652f;
  --bk-green-soft: rgba(8, 124, 50, .09);
  --bk-text: #0b1a10;
  --bk-muted: #52685a;
  --bk-subtle: #75887c;
  --bk-danger: #c4314d;
  --bk-warning: #9b6800;
  --bk-info: #006c91;
  --bk-page: radial-gradient(circle at 82% 0%, rgba(40, 217, 104, .08), transparent 27%), #f3f7f4;
  --bk-shadow: 0 20px 48px rgba(13, 38, 22, .1);
  --bk-shadow-soft: 0 10px 26px rgba(13, 38, 22, .08);
}

html, body { min-height: 100%; }
body {
  background: var(--bk-page) !important;
  color: var(--bk-text) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bk-green); }
a:hover { color: var(--bk-lime); }
.text-muted { color: var(--bk-muted) !important; }
.text-dark { color: var(--bk-text) !important; }
.text-primary { color: var(--bk-green) !important; }
.bg-light { background: var(--bk-panel-2) !important; }
.border, .border-top, .border-bottom, .border-end { border-color: var(--bk-border) !important; }

/* App frame */
#wrapper { min-height: 100vh; }
#page-content-wrapper {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.backup-main { flex: 1; max-width: 1760px; margin-inline: auto; }

/* Sidebar */
#sidebar-wrapper.backup-sidebar {
  width: 278px;
  min-width: 278px;
  min-height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
  background: linear-gradient(180deg, #020403 0%, #07100a 55%, #0a160e 100%) !important;
  border-right: 1px solid rgba(99, 255, 135, .13) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,255,135,.28) transparent;
}
.backup-sidebar .sidebar-heading {
  height: 128px;
  padding: 15px 18px 13px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent !important;
  border-bottom: 1px solid rgba(99, 255, 135, .12);
}
.backup-sidebar .sidebar-heading img { width: 174px; height: 92px; object-fit: contain; }
.backup-sidebar .sidebar-heading span {
  margin-top: -9px;
  color: rgba(161,255,181,.68);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.backup-sidebar .list-group { padding: 12px 10px; gap: 3px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
#sidebar-wrapper .list-group-item,
#sidebar-wrapper .list-group-item.bg-dark {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border-radius: 10px;
  background: transparent !important;
  color: #c6d7ca !important;
  font-size: .88rem;
  font-weight: 550;
  border: 1px solid transparent !important;
}
#sidebar-wrapper .list-group-item i { width: 21px; color: #7f9b87; transition: color .18s ease; }
#sidebar-wrapper .list-group-item:hover {
  color: #effff3 !important;
  background: rgba(99,255,135,.07) !important;
  border-color: rgba(99,255,135,.1) !important;
}
#sidebar-wrapper .list-group-item:hover i { color: var(--bk-green); }
#sidebar-wrapper .list-group-item.active {
  color: var(--bk-green) !important;
  background: rgba(99,255,135,.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 650;
  position: relative;
}
#sidebar-wrapper .list-group-item.active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--bk-green);
}
#sidebar-wrapper .list-group-item.active i { color: var(--bk-green) !important; }
/* Submenu (collapsed dropdown) active: lighter, no left bar to avoid clutter */
#sidebar-wrapper .collapse .list-group-item.active {
  background: rgba(99,255,135,.06) !important;
}
#sidebar-wrapper .collapse .list-group-item.active::before { display: none; }
#sidebar-wrapper .collapse .list-group-item { min-height: 38px; padding-block: 8px; padding-left: 45px !important; font-size: .8rem; }
#sidebar-wrapper .dropdown-toggle::after { margin-left: auto; opacity: .5; }
#sidebar-wrapper > .position-absolute {
  position: static !important;
  margin-top: auto;
  flex: 0 0 auto;
  background: rgba(3,8,5,.92) !important;
  border-color: rgba(99,255,135,.12) !important;
  backdrop-filter: blur(12px);
}
#sidebar-wrapper > .position-absolute .badge {
  color: var(--bk-green) !important;
  background: rgba(40,217,104,.12) !important;
  border: 1px solid rgba(40,217,104,.22) !important;
  font-weight: 600;
}

/* Top bar */
.backup-topbar {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bk-panel) 90%, transparent);
  border-bottom: 1px solid var(--bk-border);
  backdrop-filter: blur(18px);
}
.topbar-brand { width: 112px; height: 58px; display: flex; align-items: center; }
.topbar-brand img { width: 100%; height: 100%; object-fit: contain; }
.topbar-context { padding-left: 16px; border-left: 1px solid var(--bk-border); line-height: 1.2; }
.topbar-context strong { display: block; max-width: 370px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .92rem; }
.eyebrow { color: var(--bk-green); font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.icon-button {
  width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bk-border); background: var(--bk-panel-2); color: var(--bk-text);
  transition: all .2s ease;
}
.icon-button:hover { border-color: var(--bk-border-strong); color: var(--bk-green); transform: translateY(-1px); }
.theme-icon-light { display: none; }
[data-bs-theme="light"] .theme-icon-dark { display: none; }
[data-bs-theme="light"] .theme-icon-light { display: inline; }
.system-live {
  align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px;
  color: var(--bk-muted); background: var(--bk-green-soft); border: 1px solid var(--bk-border); font-size: .75rem; font-weight: 650;
}
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--bk-green); box-shadow: 0 0 0 4px rgba(99,255,135,.1), 0 0 12px var(--bk-green); animation: bk-pulse 2.3s ease infinite; }
@keyframes bk-pulse { 50% { opacity: .55; box-shadow: 0 0 0 8px rgba(99,255,135,0); } }
.user-menu {
  min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 5px 9px 5px 6px;
  color: var(--bk-text); background: transparent; border: 1px solid transparent; border-radius: 12px;
}
.user-menu:hover { background: var(--bk-green-soft); border-color: var(--bk-border); }
.user-menu strong { font-size: .8rem; line-height: 1.1; }
.user-menu small { color: var(--bk-muted); font-size: .66rem; }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)); font-weight: 850; }
.backup-dropdown, .dropdown-menu {
  background: var(--bk-panel) !important; color: var(--bk-text) !important;
  border: 1px solid var(--bk-border) !important; border-radius: 12px !important; box-shadow: var(--bk-shadow) !important;
}
.dropdown-item { color: var(--bk-text); border-radius: 7px; }
.dropdown-item:hover { background: var(--bk-green-soft); color: var(--bk-green); }

/* Footer */
.backup-footer { padding: 18px 0 20px; margin-top: 32px; border-top: 1px solid var(--bk-border); color: var(--bk-muted); }
.footer-brand-line { display: flex; justify-content: center; align-items: center; gap: 7px; margin-bottom: 8px; font-size: .72rem; }
.footer-brand-line img, .login-footer-brand img { width: 46px; height: 28px; object-fit: contain; }
.footer-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .74rem; }
.footer-meta strong { color: var(--bk-text); }
.footer-meta .fa-heart { color: var(--bk-green); }
.footer-divider { color: var(--bk-subtle); }

/* Common surfaces */
.card,
.dashboard-card,
.modern-table-card,
.schedule-info-card,
.form-card,
.cron-builder,
.job-item {
  background: var(--bk-panel) !important;
  color: var(--bk-text) !important;
  border: 1px solid var(--bk-border) !important;
  box-shadow: var(--bk-shadow-soft) !important;
}
.card, .dashboard-card, .modern-table-card { border-radius: 16px !important; overflow: hidden; }
.dashboard-card:hover, .modern-table-card:hover { transform: translateY(-2px) !important; box-shadow: var(--bk-shadow) !important; }
.card-header,
.dashboard-card .card-header,
.modern-table-card .card-header,
.header-primary,
.header-info,
.header-success,
.header-dark {
  background: linear-gradient(135deg, #101a13, #18261d) !important;
  color: #f1fff4 !important;
  border-bottom: 1px solid rgba(99,255,135,.2) !important;
}
[data-bs-theme="light"] .card-header,
[data-bs-theme="light"] .dashboard-card .card-header,
[data-bs-theme="light"] .modern-table-card .card-header,
[data-bs-theme="light"] .header-primary,
[data-bs-theme="light"] .header-info,
[data-bs-theme="light"] .header-success,
[data-bs-theme="light"] .header-dark {
  background: linear-gradient(135deg, #0b1a10, #11381e) !important;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.dashboard-card .card-header h5,
.modern-table-card .card-header h5 { color: #f1fff4 !important; }
.card-footer { background: var(--bk-panel-2) !important; border-color: var(--bk-border) !important; }
.dashboard-container { padding: 28px 0 !important; }
.dashboard-header { margin-bottom: 24px !important; }
.dashboard-header h1, .dashboard-header h2, h1, h2, h3, h4, h5, h6 { color: var(--bk-text) !important; }
.dashboard-header h2 i, .dashboard-header h2 svg { color: var(--bk-green) !important; }
.dashboard-header p { color: var(--bk-muted) !important; }

/* Matrix stat cards: semantic differences live in the icon/accent, not rainbow fills. */
.stat-card,
.stat-card.gradient-primary,
.stat-card.gradient-success,
.stat-card.gradient-warning,
.stat-card.gradient-danger,
.stat-card.primary-card,
.stat-card.success-card,
.stat-card.warning-card,
.stat-card.info-card {
  min-height: 132px;
  background: linear-gradient(145deg, var(--bk-panel), var(--bk-panel-2)) !important;
  color: var(--bk-text) !important;
  border: 1px solid var(--bk-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--bk-shadow-soft) !important;
}
.stat-card::before { height: 3px !important; background: linear-gradient(90deg, var(--bk-green-strong), var(--bk-lime)) !important; }
.stat-card .stat-label { color: var(--bk-muted) !important; }
.stat-card .stat-value { color: var(--bk-text) !important; }
.stat-card .stat-icon { color: var(--bk-green) !important; opacity: .22 !important; }

/* Buttons and controls */
.btn-primary,
.view-all-btn,
.add-schedule-btn,
.add-host-btn,
.action-btn,
.schedule-action-btn,
.btn-modern,
.refresh-dashboard,
.dt-paging-button.current {
  background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(40,217,104,.2) !important;
}
.btn-primary:hover, .view-all-btn:hover, .add-schedule-btn:hover, .add-host-btn:hover, .action-btn:hover, .schedule-action-btn:hover, .btn-modern:hover {
  color: #fff !important; transform: translateY(-2px); background: var(--bk-action-hover) !important;
}
.btn-outline-primary, .btn-outline-secondary {
  border-color: var(--bk-border-strong) !important; color: var(--bk-green) !important; background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--bk-green-soft) !important; color: var(--bk-green) !important; }
.btn-danger, .btn-outline-danger { color: #fff !important; }
.btn-success,
.text-bg-success,
.bg-success {
  color: #fff !important;
  background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  border-color: var(--bk-action) !important;
}

.form-control, .form-select, .select2-selection, .dt-length select, .dt-search input {
  color: var(--bk-text) !important; background: var(--bk-panel-2) !important;
  border: 1px solid var(--bk-border) !important; border-radius: 10px !important;
}
.form-control:focus, .form-select:focus, .select2-selection:focus, .dt-search input:focus {
  border-color: var(--bk-green) !important; box-shadow: 0 0 0 3px var(--bk-green-soft) !important;
}
.form-control::placeholder { color: var(--bk-subtle); }
.form-label, label { color: var(--bk-muted); }
.form-check-input { background-color: var(--bk-panel-2); border-color: var(--bk-border-strong); }
.form-check-input:checked { background-color: var(--bk-green-strong) !important; border-color: var(--bk-green-strong) !important; }
.input-group-text {
  color: #fff !important;
  background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  border-color: var(--bk-border-strong) !important;
}
.btn-save {
  color: #fff !important; background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  border: 0 !important; border-radius: 11px !important; box-shadow: 0 8px 22px rgba(40,217,104,.2) !important;
}
.btn-save:hover { color: #fff !important; background: var(--bk-action-hover) !important; }
.btn-cancel { color: var(--bk-muted) !important; background: var(--bk-elevated) !important; border: 1px solid var(--bk-border) !important; border-radius: 11px !important; }
.alert-info { color: var(--bk-text) !important; background: var(--bk-green-soft) !important; border-color: var(--bk-border) !important; }
.modal-content { color: var(--bk-text); background: var(--bk-panel); border: 1px solid var(--bk-border); }
.modal-header, .modal-footer { border-color: var(--bk-border); }
.step-circle, .step-item.active .step-circle, .step-item.completed .step-circle {
  color: #fff !important; background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  box-shadow: 0 8px 22px rgba(40,217,104,.16) !important;
}
.step-item.active .step-label { color: var(--bk-green) !important; }
.step-label { color: var(--bk-muted) !important; }
.step-number { color: var(--bk-text) !important; background: var(--bk-panel) !important; }
.host-label, .backup-type-label, .cron-preset, .review-item {
  color: var(--bk-text) !important; background: var(--bk-panel-2) !important; border-color: var(--bk-border) !important;
}
.host-radio:checked + .host-label,
.backup-type-radio:checked + .backup-type-label,
.cron-preset:hover,
.cron-preset.selected { border-color: var(--bk-green) !important; background: var(--bk-green-soft) !important; }
.schedule-avatar-large, .host-avatar, .bg-gradient-primary, .bg-gradient-success, .bg-gradient-info {
  color: #fff !important; background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  box-shadow: 0 8px 22px rgba(40,217,104,.16) !important;
}
.detail-table tr { border-color: var(--bk-border) !important; }
.detail-label { color: var(--bk-muted) !important; }
.detail-value { color: var(--bk-text) !important; }

/* Tables */
.table, .table-modern, .dashboard-table { --bs-table-bg: transparent; --bs-table-color: var(--bk-text); color: var(--bk-text) !important; }
.table thead th,
.table-modern thead th,
.dashboard-table thead th {
  background: var(--bk-panel-2) !important; color: var(--bk-muted) !important;
  border-bottom: 1px solid var(--bk-border) !important; font-size: .69rem !important; letter-spacing: .065em !important;
}
.table tbody td, .table-modern tbody td, .dashboard-table tbody td { color: var(--bk-text) !important; border-color: var(--bk-border) !important; }
.table tbody tr:hover, .table-modern tbody tr:hover, .dashboard-table tbody tr:hover {
  background: var(--bk-green-soft) !important; transform: none !important;
}
.table strong, .dashboard-table strong, .log-content strong, .job-title { color: var(--bk-text) !important; }
.dt-info, .dt-length label, .dt-search label { color: var(--bk-muted) !important; }
.dt-paging-button {
  background: var(--bk-panel-2) !important; color: var(--bk-text) !important; border: 1px solid var(--bk-border) !important;
}
.dt-paging-button:hover:not(.disabled) { color: var(--bk-green) !important; background: var(--bk-green-soft) !important; }
.dt-paging-button.current,
.dt-paging-button.current:hover:not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link,
.pagination .page-link.active,
.page-link[aria-current="page"] {
  color: #fff !important;
  background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)) !important;
  border-color: var(--bk-action) !important;
}

/* Status, progress and compact metadata */
.badge, .badge-modern, .status-badge, .host-badge, .time-badge, .next-run-badge, .cron-display {
  border-radius: 999px !important; font-weight: 700 !important;
}
.badge-primary-soft, .badge-info-soft, .host-badge, .next-run-badge, .time-badge, .cron-display {
  background: var(--bk-green-soft) !important; color: var(--bk-green) !important; border: 1px solid var(--bk-border) !important;
}
.badge-success-soft, .status-badge.success { background: rgba(40,217,104,.1) !important; color: var(--bk-green) !important; border: 1px solid rgba(40,217,104,.22) !important; }
.badge-warning-soft, .status-badge.warning { background: rgba(255,209,102,.1) !important; color: var(--bk-warning) !important; border: 1px solid rgba(255,209,102,.22) !important; }
.badge-danger-soft, .status-badge.danger { background: rgba(255,107,127,.1) !important; color: var(--bk-danger) !important; border: 1px solid rgba(255,107,127,.22) !important; }
.badge-secondary { background: var(--bk-elevated) !important; color: var(--bk-muted) !important; border: 1px solid var(--bk-border) !important; }
.status-dot.success { background: var(--bk-green) !important; box-shadow: 0 0 10px rgba(99,255,135,.45) !important; }
.status-dot.running { background: var(--bk-info) !important; box-shadow: 0 0 10px rgba(115,216,255,.4) !important; }
.status-dot.warning { background: var(--bk-warning) !important; box-shadow: 0 0 10px rgba(255,209,102,.35) !important; }
.status-dot.danger { background: var(--bk-danger) !important; box-shadow: 0 0 10px rgba(255,107,127,.35) !important; }
.progress, .progress-inline { background: var(--bk-elevated) !important; }
.progress-bar, .progress-bar-inline { background: linear-gradient(90deg, var(--bk-action), var(--bk-action-strong)) !important; color: #fff !important; }
.progress-text, .progress-text-inline { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }
.job-item { border-radius: 12px !important; box-shadow: none !important; }
.job-item::before { background: var(--bk-green-soft) !important; }
.job-item:hover { border-color: var(--bk-border-strong) !important; transform: translateX(3px) !important; box-shadow: var(--bk-shadow-soft) !important; }
.log-card { background: var(--bk-panel-2) !important; }
.log-card.log-error { border-left-color: var(--bk-danger) !important; }
.log-card.log-warning { border-left-color: var(--bk-warning) !important; }
.log-card.log-info { border-left-color: var(--bk-green) !important; }
.skeleton-loader { background: linear-gradient(90deg, var(--bk-elevated) 25%, var(--bk-green-soft) 50%, var(--bk-elevated) 75%) !important; background-size: 200% 100% !important; }
.refresh-dashboard { width: 52px !important; height: 52px !important; right: 24px !important; bottom: 28px !important; }

/* SweetAlert and toast integration */
.swal2-popup { background: var(--bk-panel) !important; color: var(--bk-text) !important; border: 1px solid var(--bk-border) !important; }
.swal2-title, .swal2-html-container { color: var(--bk-text) !important; }
.swal2-confirm { background: var(--bk-action) !important; color: #fff !important; }
#toast-container > div { background-color: var(--bk-panel) !important; color: var(--bk-text) !important; border: 1px solid var(--bk-border); box-shadow: var(--bk-shadow); opacity: 1; }

/* Login */
.backup-login-page {
  min-height: 100vh; overflow-x: hidden; background:
    radial-gradient(circle at 15% 18%, rgba(99,255,135,.1), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(40,217,104,.08), transparent 32%),
    linear-gradient(145deg, #020403, #07100a 50%, #0b1510) !important;
}
.matrix-grid { position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(99,255,135,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(99,255,135,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 78%); }
.login-stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px 24px 24px; position: relative; z-index: 1; }
.login-shell {
  width: min(1050px, 100%); min-height: 610px; display: grid; grid-template-columns: 1.15fr .85fr;
  overflow: hidden; border: 1px solid rgba(99,255,135,.18); border-radius: 26px;
  background: rgba(7,12,9,.9); box-shadow: 0 40px 100px rgba(0,0,0,.5); backdrop-filter: blur(16px);
}
.login-identity { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 44px; text-align: center; background: radial-gradient(circle at 60% 24%, rgba(99,255,135,.08), transparent 34%), linear-gradient(145deg, #020403, #0b1710); border-right: 1px solid rgba(99,255,135,.13); }
.login-identity::after { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(99,255,135,.07); border-radius: 18px; pointer-events: none; }
.login-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; color: #8bfda4; font-size: .68rem; letter-spacing: .15em; font-weight: 800; }
.login-product-logo { width: min(485px, 100%); height: 320px; object-fit: contain; margin: 4px 0 -4px; filter: drop-shadow(0 15px 34px rgba(40,217,104,.09)); }
.login-identity > p { max-width: 500px; margin: 0; color: #9bb5a2; line-height: 1.65; font-size: .92rem; }
.identity-status { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.identity-status span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: #ccebd3; background: rgba(99,255,135,.06); border: 1px solid rgba(99,255,135,.11); border-radius: 999px; font-size: .69rem; }
.identity-status i { color: #63ff87; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 50px 46px; background: rgba(14,22,17,.96); }
.login-panel-heading { margin-bottom: 28px; }
.login-panel-heading h1 { margin: 7px 0 5px; color: #f2fff5 !important; font-size: 2rem; font-weight: 760; }
.login-panel-heading p { margin: 0; color: #91a898; font-size: .9rem; }
.backup-login-form { display: grid; gap: 19px; }
.form-field label { display: block; margin-bottom: 8px; color: #c7d8cb; font-size: .75rem; font-weight: 700; }
.field-control { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid rgba(99,255,135,.14); border-radius: 11px; background: #09100c; transition: border-color .2s, box-shadow .2s; }
.field-control:focus-within { border-color: #63ff87; box-shadow: 0 0 0 3px rgba(99,255,135,.09); }
.field-control > i { width: 16px; color: #ffffff; }
.field-control input { flex: 1; min-width: 0; border: 0; outline: 0; color: #effff3; background: transparent; font-size: .92rem; }
.field-control input::placeholder { color: #52665a; }
.password-toggle { width: 36px; height: 36px; border: 0; border-radius: 8px; color: #789080; background: transparent; }
.password-toggle:hover { color: #63ff87; background: rgba(99,255,135,.08); }
.remember-control { width: fit-content; display: inline-flex; align-items: center; gap: 9px; color: #9fb0a4; font-size: .76rem; cursor: pointer; }
.remember-control input { accent-color: #28d968; }
.btn-login { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--bk-action-strong), var(--bk-action)); font-weight: 800; box-shadow: 0 12px 30px rgba(40,217,104,.16); transition: transform .2s, box-shadow .2s; }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(40,217,104,.23); }
.btn-login:disabled { opacity: .65; transform: none; }
.login-help { margin: 24px 0 0; color: #72877a; font-size: .7rem; text-align: center; }
.login-footer-brand { display: flex; align-items: center; gap: 7px; margin-top: 22px; color: #eaf3ec; font-size: .68rem; }
.login-footer-brand img { filter: saturate(.6) brightness(1.35); }
.login-footer-copy { padding-left: 9px; border-left: 1px solid rgba(99,255,135,.13); }
.login-panel .alert-danger { color: #ffb9c3; background: rgba(255,107,127,.09); border: 1px solid rgba(255,107,127,.18); border-radius: 10px; }

/* Responsive */
@media (max-width: 991.98px) {
  #sidebar-wrapper.backup-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1045; transform: translateX(-100%); transition: transform .25s ease; }
  #sidebar-wrapper.backup-sidebar.sidebar-open { transform: translateX(0); }
  .login-shell { grid-template-columns: 1fr; max-width: 560px; }
  .login-identity { min-height: 330px; padding: 30px; border-right: 0; border-bottom: 1px solid rgba(99,255,135,.13); }
  .login-product-logo { height: 230px; }
  .login-identity > p, .identity-status { display: none; }
  .login-panel { padding: 38px 34px; }
}
@media (max-width: 575.98px) {
  .backup-topbar { height: 68px; }
  .topbar-brand { width: 94px; }
  .backup-main { padding-inline: 12px !important; }
  .footer-meta { flex-direction: column; gap: 4px; }
  .footer-divider { display: none; }
  .login-stage { padding: 18px 12px; justify-content: flex-start; }
  .login-shell { border-radius: 18px; }
  .login-identity { min-height: 250px; padding: 18px; }
  .login-product-logo { height: 195px; margin-top: -4px; }
  .login-kicker { align-self: center; }
  .login-panel { padding: 30px 22px; }
  .login-footer-copy { display: none; }
  .display-5, .display-6 { font-size: 1.8rem !important; }
  .stat-card { min-height: 110px; }
  .refresh-dashboard { right: 14px !important; bottom: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}