/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Toggle via body.dark-mode class
   Overrides CSS variables from index.css
═══════════════════════════════════════════════════════════════ */

body.dark-mode {
    --glass-bg: rgba(15, 23, 42, 0.55);
    --glass-border: rgba(100, 160, 220, 0.10);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    --text-primary: #e2e8f0;
    --text-secondary: rgba(148, 163, 184, 0.75);
    --accent: #3B82F6;
    --accent2: #60A5FA;

    background-image: url('/pos1/dark.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #e2e8f0;
}


/* Topbar */
body.dark-mode .topbar {
    background: rgba(15, 23, 42, 0.55);
    border-bottom-color: rgba(100, 160, 220, 0.08);
}

body.dark-mode .topbar::before,
body.dark-mode .topbar::after {
    background: rgba(15, 23, 42, 0.55);
    filter: none;
}

body.dark-mode .topbar-brand-name,
body.dark-mode .topbar-brand-sub {
    color: #e2e8f0;
}

body.dark-mode .topbar-search-wrap {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(100, 160, 220, 0.15);
}

body.dark-mode .topbar-search-input {
    color: #e2e8f0;
}

body.dark-mode .topbar-search-input::placeholder {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .topbar-diag::after {
    background: rgba(100, 120, 150, 0.35);
}

body.dark-mode .topbar-sep {
    background: rgba(100, 120, 150, 0.3);
}

body.dark-mode .topbar-user-name,
body.dark-mode .topbar-user-role {
    color: #e2e8f0;
}

/* Search Dropdown */
body.dark-mode .search-dropdown {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(100, 160, 220, 0.12);
}

body.dark-mode .search-group-title {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .search-item:hover {
    background: rgba(37, 99, 235, 0.1);
}

body.dark-mode .search-item-line1 {
    color: #e2e8f0;
}

body.dark-mode .search-item-line2 {
    color: rgba(148, 163, 184, 0.6);
}

/* Notification Dropdowns */
body.dark-mode .notif-dropdown,
body.dark-mode .user-dropdown {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(100, 160, 220, 0.12);
}

body.dark-mode .notif-header {
    border-bottom-color: rgba(100, 160, 220, 0.1);
}

body.dark-mode .notif-header-title,
body.dark-mode .notif-item-title {
    color: #e2e8f0;
}

body.dark-mode .notif-item-desc,
body.dark-mode .notif-item-time {
    color: rgba(148, 163, 184, 0.6);
}

body.dark-mode .notif-item:hover {
    background: rgba(37, 99, 235, 0.08);
}

/* Sidenav */
body.dark-mode .sidenav {
    background: rgba(15, 23, 42, 0.75);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2), inset -1px 0 0 rgba(100, 160, 220, 0.08);
}

body.dark-mode .sidenav:hover {
    background: rgba(15, 23, 42, 0.92);
}

body.dark-mode .nav-icon {
    box-shadow: none;
}

body.dark-mode .nav-section-label {
    color: rgba(148, 163, 184, 0.4);
}

body.dark-mode .nav-label {
    background: linear-gradient(90deg, #60A5FA 0%, #60A5FA 40%, #f87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .nav-item {
    background: transparent;
}

body.dark-mode .nav-item:hover,
body.dark-mode .nav-item.active {
    background: rgba(37, 99, 235, 0.15);
}

body.dark-mode .nav-divider {
    background: rgba(100, 160, 220, 0.08);
}

body.dark-mode .nav-bottom {
    border-top-color: rgba(100, 160, 220, 0.08);
}

/* Main Content — Glass Cards */
body.dark-mode .main-content {
    color: #e2e8f0;
}

/* Card float badges — dark mode */
body.dark-mode .card-float-badge {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(100, 160, 220, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Generic glass overrides */
body.dark-mode .glass-card,
body.dark-mode .glass-card-cus,
body.dark-mode .products-glass-container,
body.dark-mode .repairs-glass-container {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(100, 160, 220, 0.10);
}

/* Tables */
body.dark-mode table th {
    color: rgba(148, 163, 184, 0.7);
}

body.dark-mode table td {
    color: #e2e8f0;
    border-bottom-color: rgba(100, 160, 220, 0.06);
}

body.dark-mode table tbody tr:hover {
    background: rgba(37, 99, 235, 0.06);
}

/* Cards / Containers */
body.dark-mode .cust-table-wrap,
body.dark-mode .cust-toolbar .cust-search-form,
body.dark-mode .cust-stat-card,
body.dark-mode .cv-card,
body.dark-mode .cv-profile-header,
body.dark-mode .cv-stat-card,
body.dark-mode .cv-contact-card,
body.dark-mode .cv-history-card,
body.dark-mode .imei-card,
body.dark-mode .imei-stat,
body.dark-mode .layaway-header,
body.dark-mode .layaway-table-container,
body.dark-mode .payment-section,
body.dark-mode .customer-card,
body.dark-mode .admin-container,
body.dark-mode .repair-card,
body.dark-mode .completed-card {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(56, 119, 214, 0.15);
    box-shadow: inset 0 1px 0 rgba(56, 119, 214, 0.12), 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Identity band — the light theme lifts it with a white wash, which would blow
   out here. A few percent is enough to separate it from the card. */
body.dark-mode .card-row-identity {
    background: rgba(255, 255, 255, 0.045);
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

/* Merged info panel. --card-bg is a hard #FFFFFF in activerepairs.css and
   isn't redefined for dark, so without this the panel renders white. */
body.dark-mode .info-panel {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(148, 163, 184, 0.16);
}
body.dark-mode .info-panel > *:not(:last-child) {
    border-bottom-color: rgba(148, 163, 184, 0.16);
}
/* The vertical rule is a pseudo-element painted with background, not border */
body.dark-mode .unlock-loc-row::after {
    background: rgba(148, 163, 184, 0.16);
}

/* Text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .cust-name,
body.dark-mode .cv-profile-info h1,
body.dark-mode .customer-name,
body.dark-mode .imei-header h1,
body.dark-mode .layaway-header h1,
body.dark-mode .vo-order-num,
body.dark-mode .cv-stat-value,
body.dark-mode .imei-stat-value,
body.dark-mode .card-value {
    color: #e2e8f0;
}

body.dark-mode p,
body.dark-mode .cust-id,
body.dark-mode .cust-phone,
body.dark-mode .cv-contact-label,
body.dark-mode .imei-header p,
body.dark-mode .layaway-header p {
    color: rgba(148, 163, 184, 0.6);
}

/* Form Inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode textarea,
body.dark-mode select {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.15);
    color: #e2e8f0;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: rgba(148, 163, 184, 0.4);
}

/* Modals */
body.dark-mode .modal-overlay,
body.dark-mode .cust-modal-overlay,
body.dark-mode .cv-modal-overlay,
body.dark-mode .imei-modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-card,
body.dark-mode .modal-content,
body.dark-mode .cust-modal,
body.dark-mode .cv-modal,
body.dark-mode .imei-modal {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(100, 160, 220, 0.12);
    color: #e2e8f0;
}

body.dark-mode .modal-header,
body.dark-mode .cust-modal-header,
body.dark-mode .cv-modal-header,
body.dark-mode .imei-modal-header {
    border-bottom-color: rgba(100, 160, 220, 0.1);
}

/* Settings Modal */
body.dark-mode .modal-card {
    background: rgba(15, 23, 42, 0.95);
}

body.dark-mode .modal-tabs {
    border-bottom-color: rgba(100, 160, 220, 0.1);
}

body.dark-mode .modal-tab {
    color: rgba(148, 163, 184, 0.6);
}

body.dark-mode .modal-tab.active {
    color: #60A5FA;
    border-bottom-color: #60A5FA;
}

body.dark-mode .modal-label {
    color: rgba(148, 163, 184, 0.7);
}

body.dark-mode .modal-input {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.15);
    color: #e2e8f0;
}

/* Dashboard specific */
body.dark-mode .card,
body.dark-mode .card-compact,
body.dark-mode .card-wide,
body.dark-mode .ws-card {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(56, 119, 214, 0.15);
    box-shadow: inset 0 1px 0 rgba(56, 119, 214, 0.12), 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Revenue breakdown rows */
body.dark-mode .rev-stat {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(100, 160, 220, 0.08);
}

body.dark-mode .rev-stat-label {
    color: rgba(148, 163, 184, 0.7);
}

body.dark-mode .rev-stat-val {
    color: #e2e8f0;
}

/* Calendar */
body.dark-mode .cal-header,
body.dark-mode .cal-month-year {
    color: #e2e8f0;
}

body.dark-mode .cal-nav {
    color: #60A5FA;
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.2);
}

body.dark-mode .cal-day-name {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .cal-day {
    color: #e2e8f0;
}

body.dark-mode .cal-day:hover {
    background: rgba(37, 99, 235, 0.15);
}

body.dark-mode .cal-day.today {
    background: rgba(37, 99, 235, 0.25);
}

body.dark-mode .cal-selected-label {
    color: rgba(148, 163, 184, 0.6);
}

/* Sync/refresh button */
body.dark-mode .sync-dash-btn {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.15);
    color: rgba(148, 163, 184, 0.7);
}

body.dark-mode .sync-dash-btn:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
    color: #60A5FA;
}

/* Card tabs */
body.dark-mode .card-tabs {
    border-bottom-color: rgba(100, 160, 220, 0.08);
}

body.dark-mode .card-tab {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .card-tab:hover,
body.dark-mode .card-tab.active {
    color: #e2e8f0;
}

body.dark-mode .card-tab.active {
    border-bottom-color: #60A5FA;
}

/* Card labels & descriptions */
body.dark-mode .card-label {
    color: rgba(148, 163, 184, 0.7);
}

body.dark-mode .card-desc {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .card-divider {
    background: rgba(100, 160, 220, 0.08);
}

/* Seller rows */
body.dark-mode .seller-row {
    border-bottom-color: rgba(100, 160, 220, 0.06);
}

body.dark-mode .seller-name {
    color: #e2e8f0;
}

body.dark-mode .seller-count,
body.dark-mode .seller-sub {
    color: rgba(148, 163, 184, 0.6);
}

body.dark-mode .seller-amount {
    color: #60A5FA;
}

/* Bank, Others, Card Payments — balance/total amounts */
body.dark-mode #bankBalance,
body.dark-mode #othersBalance,
body.dark-mode #squareTotal {
    color: #60A5FA !important;
}

body.dark-mode #squareNet {
    color: #60A5FA !important;
}

/* Total Sales, Cost, Profit card amounts */
body.dark-mode #salesCardTotal,
body.dark-mode #salesTotalNum {
    color: #60A5FA !important;
}

body.dark-mode #costCardTotal,
body.dark-mode #costTotalNum {
    color: #f87171 !important;
}

body.dark-mode #profitCardTotal,
body.dark-mode #profitTotalNum {
    color: #34D399 !important;
}

/* Sales by Week = blue, Cost by Week = red, Profit by Week = green */
body.dark-mode .weekly-stats > :nth-child(1) .ws-value { color: #60A5FA; }
body.dark-mode .weekly-stats > :nth-child(3) .ws-value { color: #f87171; }
body.dark-mode .weekly-stats > :nth-child(5) .ws-value { color: #34D399; }

/* Card value sup ($) */
body.dark-mode .card-value sup {
    color: inherit;
}

body.dark-mode .seller-rank {
    color: rgba(148, 163, 184, 0.5);
}

/* Bank, Deductibles & Others cards */
body.dark-mode #deductiblesCard,
body.dark-mode #expensesCard,
body.dark-mode #bankCard,
body.dark-mode #othersCard {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-color: rgba(100, 160, 220, 0.10);
}

body.dark-mode #deductiblesCard input,
body.dark-mode #expensesCard input,
body.dark-mode #bankCard input,
body.dark-mode #othersCard input,
body.dark-mode #deductiblesCard select,
body.dark-mode #expensesCard select,
body.dark-mode #bankCard select,
body.dark-mode #othersCard select {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.15);
    color: #e2e8f0;
}

/* Stat chips */
body.dark-mode .stat-chip {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.12);
    color: #e2e8f0;
}

/* Table card */
body.dark-mode .card-wide {
    background: rgba(15, 23, 42, 0.55);
}

body.dark-mode .product-img {
    border-color: rgba(100, 160, 220, 0.1);
}

/* Sales table card */
body.dark-mode .table-wrap {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(56, 119, 214, 0.15);
    box-shadow: inset 0 1px 0 rgba(56, 119, 214, 0.12), 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Table value colors */
body.dark-mode .val-amount {
    color: #60A5FA;
}

body.dark-mode .val-cost-on {
    color: #f87171;
}

body.dark-mode .val-cost-off {
    color: rgba(248, 113, 113, 0.35);
}

body.dark-mode .val-profit {
    color: #34D399;
}

body.dark-mode .val-profit-neg {
    color: #f87171;
}

/* Topbar icon buttons (notifications) */
body.dark-mode .topbar-icon-btn {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.12);
}

body.dark-mode .topbar-icon-btn:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.25);
}

body.dark-mode .topbar-user-btn {
    background: transparent;
}

body.dark-mode .dark-toggle {
    color: #e2e8f0;
}

/* Bank, Deductibles & Others text inputs */
body.dark-mode .bank-input,
body.dark-mode .bank-select,
body.dark-mode .others-input,
body.dark-mode .others-select,
body.dark-mode #deductiblesCard input[type="text"],
body.dark-mode #deductiblesCard input[type="number"],
body.dark-mode #deductiblesCard select,
body.dark-mode #expensesCard input[type="text"],
body.dark-mode #expensesCard input[type="number"],
body.dark-mode #expensesCard select,
body.dark-mode #bankCard input[type="text"],
body.dark-mode #bankCard input[type="number"],
body.dark-mode #bankCard select,
body.dark-mode #othersCard input[type="text"],
body.dark-mode #othersCard input[type="number"],
body.dark-mode #othersCard select {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(100, 160, 220, 0.15) !important;
    color: #e2e8f0 !important;
}

body.dark-mode #deductiblesCard input::placeholder,
body.dark-mode #expensesCard input::placeholder,
body.dark-mode #bankCard input::placeholder,
body.dark-mode #othersCard input::placeholder {
    color: rgba(148, 163, 184, 0.4) !important;
}

/* Bank, Deductibles, Expenses & Others labels */
body.dark-mode #deductiblesCard .card-label,
body.dark-mode #expensesCard .card-label,
body.dark-mode #bankCard .card-label,
body.dark-mode #othersCard .card-label,
body.dark-mode #deductiblesCard h3,
body.dark-mode #expensesCard h3,
body.dark-mode #bankCard h3,
body.dark-mode #othersCard h3 {
    color: rgba(148, 163, 184, 0.7);
}

/* Transaction rows */
body.dark-mode .txn-row,
body.dark-mode .bank-txn-row {
    border-bottom-color: rgba(100, 160, 220, 0.06);
    color: #e2e8f0;
}

body.dark-mode .stat-chip {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.12);
    color: #e2e8f0;
}

body.dark-mode .rep-name {
    color: #e2e8f0;
}

body.dark-mode .rep-region {
    color: rgba(148, 163, 184, 0.5);
}

/* PIN Lock */
body.dark-mode .pin-overlay {
    background: rgba(0, 0, 0, 0.85);
}

/* Badge/Inventory Modal */
body.dark-mode .badge-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .badge-modal {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(56, 119, 214, 0.15);
    box-shadow: inset 0 1px 0 rgba(56, 119, 214, 0.12), 0 16px 48px rgba(0, 0, 0, 0.4);
}

body.dark-mode .badge-modal-header {
    border-bottom-color: rgba(100, 160, 220, 0.1);
}

body.dark-mode .badge-modal-eyebrow {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .badge-modal-title {
    color: #e2e8f0;
}

body.dark-mode .badge-modal-close {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(100, 160, 220, 0.12);
    color: rgba(148, 163, 184, 0.7);
}

body.dark-mode .badge-modal-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

body.dark-mode .badge-item {
    border-bottom-color: rgba(100, 160, 220, 0.06);
}

body.dark-mode .badge-item-img {
    background: rgba(30, 41, 59, 0.5);
}

body.dark-mode .badge-item-name {
    color: #e2e8f0;
}

body.dark-mode .badge-item-imei,
body.dark-mode .badge-item-sub {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode .badge-item-check {
    color: rgba(96, 165, 250, 0.5);
}

/* ── Dark Mode Holo Toggle (Uiverse.io by reglobby) ── */
.toggle-container { position: relative; width: 90px; display: flex; flex-direction: column; align-items: center; perspective: 800px; z-index: 5; flex-shrink: 0; }
.toggle-wrap { position: relative; width: 100%; height: 36px; transform-style: preserve-3d; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; width: 100%; height: 100%; background: rgba(0,30,60,0.4); border-radius: 18px; cursor: pointer; box-shadow: 0 0 10px rgba(0,80,255,0.2), inset 0 0 8px rgba(0,0,0,0.8); overflow: hidden; backdrop-filter: blur(5px); transition: all 0.6s cubic-bezier(0.23,1,0.32,1); border: 1px solid rgba(0,150,255,0.3); }
.toggle-track::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(0,80,255,0.1) 0%, transparent 70%); opacity: 0.6; transition: all 0.6s; }
.toggle-track::after { content: ""; position: absolute; top: 1px; left: 1px; right: 1px; height: 6px; background: linear-gradient(90deg, rgba(0,170,255,0.3) 0%, rgba(0,80,255,0.1) 100%); border-radius: 18px 18px 0 0; opacity: 0.7; filter: blur(1px); }
.track-lines { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); overflow: hidden; }
.track-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(0,150,255,0.3) 0px, rgba(0,150,255,0.3) 3px, transparent 3px, transparent 10px); animation: track-line-move 3s linear infinite; }
@keyframes track-line-move { 0% { transform: translateX(0); } 100% { transform: translateX(10px); } }
.toggle-thumb { position: absolute; width: 32px; height: 32px; left: 2px; top: 2px; background: radial-gradient(circle, rgba(10,40,90,0.9) 0%, rgba(0,20,50,0.8) 100%); border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,150,255,0.5); transition: all 0.6s cubic-bezier(0.23,1,0.32,1); z-index: 2; border: 1px solid rgba(0,170,255,0.6); overflow: hidden; }
.thumb-core { position: absolute; width: 24px; height: 24px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(0,180,255,0.6) 0%, rgba(0,50,120,0.2) 100%); border-radius: 50%; box-shadow: 0 0 14px rgba(0,150,255,0.5); opacity: 0.9; transition: all 0.6s; }
.thumb-inner { position: absolute; width: 14px; height: 14px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(100,200,255,0.5) 100%); border-radius: 50%; box-shadow: 0 0 6px rgba(100,200,255,0.7); opacity: 0.7; transition: all 0.6s; animation: pulse 2s infinite alternate; }
@keyframes pulse { 0% { opacity: 0.5; transform: translate(-50%,-50%) scale(0.9); } 100% { opacity: 0.8; transform: translate(-50%,-50%) scale(1.1); } }
.thumb-scan { position: absolute; width: 100%; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(0,150,255,0.5) 20%, rgba(255,255,255,0.8) 50%, rgba(0,150,255,0.5) 80%, transparent 100%); top: 0; left: 0; filter: blur(1px); animation: thumb-scan 2s linear infinite; opacity: 0.7; }
@keyframes thumb-scan { 0% { top: -3px; opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.7; } 100% { top: 32px; opacity: 0; } }
.thumb-particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
.thumb-particle { position: absolute; width: 2px; height: 2px; background: rgba(100,200,255,0.8); border-radius: 50%; box-shadow: 0 0 3px rgba(100,200,255,0.8); animation: thumb-particle-float 3s infinite ease-out; opacity: 0; }
.thumb-particle:nth-child(1) { top: 70%; left: 30%; animation-delay: 0.2s; }
.thumb-particle:nth-child(2) { top: 60%; left: 60%; animation-delay: 0.6s; }
.thumb-particle:nth-child(3) { top: 50%; left: 40%; animation-delay: 1s; }
.thumb-particle:nth-child(4) { top: 40%; left: 70%; animation-delay: 1.4s; }
.thumb-particle:nth-child(5) { top: 80%; left: 50%; animation-delay: 1.8s; }
@keyframes thumb-particle-float { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-20px) scale(0); opacity: 0; } }
.toggle-data { position: absolute; width: 100%; height: 100%; z-index: 1; }
.data-text { position: absolute; font-size: 8px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all 0.5s ease; font-family: var(--font-ui); }
.data-text.off { right: 8px; top: 50%; transform: translateY(-50%); opacity: 1; color: rgba(0,150,255,0.6); text-shadow: 0 0 5px rgba(0,100,255,0.4); }
.data-text.on { left: 10px; top: 50%; transform: translateY(-50%); opacity: 0; color: rgba(0,255,150,0.6); text-shadow: 0 0 5px rgba(0,255,100,0.4); }
.energy-rings { position: absolute; width: 32px; height: 32px; left: 2px; top: 2px; pointer-events: none; z-index: 1; transition: all 0.6s cubic-bezier(0.23,1,0.32,1); }
.energy-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid transparent; opacity: 0; }
.energy-ring:nth-child(1) { width: 30px; height: 30px; border-top-color: rgba(0,150,255,0.5); animation: spin 3s linear infinite; }
.energy-ring:nth-child(2) { width: 22px; height: 22px; border-bottom-color: rgba(0,150,255,0.5); animation: spin 2s linear infinite reverse; }
.energy-ring:nth-child(3) { width: 16px; height: 16px; border-left-color: rgba(0,150,255,0.5); animation: spin 1.5s linear infinite; }
@keyframes spin { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
.toggle-reflection { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%); border-radius: 18px; pointer-events: none; }
.holo-glow { position: absolute; width: 100%; height: 100%; border-radius: 18px; background: radial-gradient(ellipse at center, rgba(0,150,255,0.2) 0%, transparent 70%); filter: blur(8px); opacity: 0.5; transition: all 0.6s; z-index: 0; }
/* Checked */
.toggle-input:checked + .toggle-track { background: rgba(0,60,30,0.4); border-color: rgba(0,255,150,0.3); box-shadow: 0 0 10px rgba(0,255,150,0.2), inset 0 0 8px rgba(0,0,0,0.8); }
.toggle-input:checked + .toggle-track::before { background: radial-gradient(ellipse at center, rgba(0,255,150,0.1) 0%, transparent 70%); }
.toggle-input:checked + .toggle-track::after { background: linear-gradient(90deg, rgba(0,255,150,0.3) 0%, rgba(0,160,80,0.1) 100%); }
.toggle-input:checked + .toggle-track .track-line { background: repeating-linear-gradient(90deg, rgba(0,255,150,0.3) 0px, rgba(0,255,150,0.3) 3px, transparent 3px, transparent 10px); animation-direction: reverse; }
.toggle-input:checked + .toggle-track .toggle-thumb { left: calc(100% - 34px); background: radial-gradient(circle, rgba(10,90,40,0.9) 0%, rgba(0,50,20,0.8) 100%); border-color: rgba(0,255,150,0.6); box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,255,150,0.5); }
.toggle-input:checked + .toggle-track .thumb-core { background: radial-gradient(circle, rgba(0,255,150,0.6) 0%, rgba(0,120,50,0.2) 100%); box-shadow: 0 0 14px rgba(0,255,150,0.5); }
.toggle-input:checked + .toggle-track .thumb-inner { background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(100,255,200,0.5) 100%); box-shadow: 0 0 6px rgba(100,255,200,0.7); }
.toggle-input:checked + .toggle-track .thumb-scan { background: linear-gradient(90deg, transparent 0%, rgba(0,255,150,0.5) 20%, rgba(255,255,255,0.8) 50%, rgba(0,255,150,0.5) 80%, transparent 100%); }
.toggle-input:checked + .toggle-track .thumb-particle { background: rgba(100,255,200,0.8); box-shadow: 0 0 3px rgba(100,255,200,0.8); }
.toggle-input:checked + .toggle-track .data-text.off { opacity: 0; }
.toggle-input:checked + .toggle-track .data-text.on { opacity: 1; }
.toggle-input:checked + .toggle-track .energy-rings { left: calc(100% - 34px); }
.toggle-input:checked + .toggle-track .energy-ring { opacity: 1; }
.toggle-input:checked + .toggle-track .energy-ring:nth-child(1) { border-top-color: rgba(0,255,150,0.5); }
.toggle-input:checked + .toggle-track .energy-ring:nth-child(2) { border-bottom-color: rgba(0,255,150,0.5); }
.toggle-input:checked + .toggle-track .energy-ring:nth-child(3) { border-left-color: rgba(0,255,150,0.5); }
.toggle-input:checked + .toggle-track .holo-glow { background: radial-gradient(ellipse at center, rgba(0,255,150,0.2) 0%, transparent 70%); }
.toggle-input:hover + .toggle-track { box-shadow: 0 0 15px rgba(0,150,255,0.3), inset 0 0 8px rgba(0,0,0,0.8); }
.toggle-input:checked:hover + .toggle-track { box-shadow: 0 0 15px rgba(0,255,150,0.3), inset 0 0 8px rgba(0,0,0,0.8); }

/* Light mode: soften the toggle appearance */
.toggle-input:checked + .toggle-track { background: rgba(200,220,240,0.5); border-color: rgba(100,160,220,0.3); box-shadow: 0 0 8px rgba(100,160,220,0.15), inset 0 0 6px rgba(0,0,0,0.1); }
.toggle-input:checked + .toggle-track::before { background: radial-gradient(ellipse at center, rgba(100,160,220,0.08) 0%, transparent 70%); }
.toggle-input:checked + .toggle-track::after { background: linear-gradient(90deg, rgba(100,160,220,0.2) 0%, rgba(100,160,220,0.05) 100%); }
.toggle-input:checked + .toggle-track .track-line { background: repeating-linear-gradient(90deg, rgba(100,160,220,0.15) 0px, rgba(100,160,220,0.15) 3px, transparent 3px, transparent 10px); }
.toggle-input:checked + .toggle-track .toggle-thumb { background: radial-gradient(circle, rgba(200,220,240,0.9) 0%, rgba(150,180,220,0.8) 100%); border-color: rgba(100,160,220,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 0 8px rgba(100,160,220,0.3); }
.toggle-input:checked + .toggle-track .thumb-core { background: radial-gradient(circle, rgba(100,160,220,0.4) 0%, rgba(100,160,220,0.1) 100%); box-shadow: 0 0 10px rgba(100,160,220,0.3); }
.toggle-input:checked + .toggle-track .thumb-inner { background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(180,210,240,0.5) 100%); box-shadow: 0 0 6px rgba(100,160,220,0.4); }
.toggle-input:checked + .toggle-track .thumb-scan { background: linear-gradient(90deg, transparent 0%, rgba(100,160,220,0.3) 20%, rgba(255,255,255,0.6) 50%, rgba(100,160,220,0.3) 80%, transparent 100%); }
.toggle-input:checked + .toggle-track .thumb-particle { background: rgba(150,190,230,0.6); box-shadow: 0 0 3px rgba(150,190,230,0.6); }
.toggle-input:checked + .toggle-track .energy-ring:nth-child(1) { border-top-color: rgba(100,160,220,0.3); }
.toggle-input:checked + .toggle-track .energy-ring:nth-child(2) { border-bottom-color: rgba(100,160,220,0.3); }
.toggle-input:checked + .toggle-track .energy-ring:nth-child(3) { border-left-color: rgba(100,160,220,0.3); }
.toggle-input:checked + .toggle-track .holo-glow { background: radial-gradient(ellipse at center, rgba(100,160,220,0.1) 0%, transparent 70%); }
.toggle-input:checked + .toggle-track .data-text.on { color: rgba(30,70,130,0.5); text-shadow: none; }
.toggle-input:checked:hover + .toggle-track { box-shadow: 0 0 10px rgba(100,160,220,0.2), inset 0 0 6px rgba(0,0,0,0.1); }

/* Dark mode: restore the original dark/blue unchecked style */
body.dark-mode .toggle-track { background: rgba(0,30,60,0.4); border-color: rgba(0,150,255,0.3); box-shadow: 0 0 10px rgba(0,80,255,0.2), inset 0 0 8px rgba(0,0,0,0.8); }
body.dark-mode .toggle-input:checked + .toggle-track { background: rgba(0,60,30,0.4); border-color: rgba(0,255,150,0.3); box-shadow: 0 0 10px rgba(0,255,150,0.2), inset 0 0 8px rgba(0,0,0,0.8); }
body.dark-mode .toggle-input:checked + .toggle-track .toggle-thumb { background: radial-gradient(circle, rgba(10,90,40,0.9) 0%, rgba(0,50,20,0.8) 100%); border-color: rgba(0,255,150,0.6); box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,255,150,0.5); }
body.dark-mode .toggle-input:checked + .toggle-track .thumb-core { background: radial-gradient(circle, rgba(0,255,150,0.6) 0%, rgba(0,120,50,0.2) 100%); box-shadow: 0 0 14px rgba(0,255,150,0.5); }
body.dark-mode .toggle-input:checked + .toggle-track .thumb-inner { background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(100,255,200,0.5) 100%); box-shadow: 0 0 6px rgba(100,255,200,0.7); }
body.dark-mode .toggle-input:checked + .toggle-track .data-text.on { color: rgba(0,255,150,0.6); text-shadow: 0 0 5px rgba(0,255,100,0.4); }
body.dark-mode .toggle-input:checked + .toggle-track .holo-glow { background: radial-gradient(ellipse at center, rgba(0,255,150,0.2) 0%, transparent 70%); }