/**
 * WarehouseOS — Multi-Theme System
 * 3 themes: Dark (default), Light Professional, Neo/Hybrid
 * Version: 2.6.1
 *
 * Architecture:
 *   :root / [data-theme="dark"]  → Dark Mode (default)
 *   [data-theme="light"]         → Light Professional
 *   [data-theme="neo"]           → Neo / Hybrid Glass
 *
 * Usage:
 *   document.documentElement.setAttribute('data-theme', 'light')
 */

/* ═══════════════════════════════════════════════════════════════════
   THEME TRANSITION — smooth switch antar tema
   ═══════════════════════════════════════════════════════════════════ */
.theme-transitioning,
.theme-transitioning * {
  transition:
    background-color 0.25s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME 1 — DARK MODE (Default, Improved)
   Konsep: Dark futuristic SaaS, elegan, cyber minimal
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* ── Core Backgrounds ── */
  --bg:           #0a0d16;
  --bg2:          #0e1121;
  --surface:      #131726;
  --surface2:     #192033;
  --surface3:     #1f2840;

  /* ── Borders ── */
  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.12);
  --border3:      rgba(255,255,255,0.18);

  /* ── Accent Colors ── */
  --accent:       #00d4a8;      /* Cyan-emerald, softer dari sebelumnya */
  --accent-hover: #00efc0;
  --accent2:      #3b82f6;      /* Blue professional */
  --warn:         #f59e0b;
  --danger:       #f43f5e;
  --success:      #10b981;

  /* ── Text ── */
  --text:         #dde3f0;      /* Soft white, bukan pure white */
  --text2:        #7d8fa8;
  --text3:        #44526a;
  --text-on-accent: #000;

  /* ── Component-Specific ── */
  --sidebar-bg:      #0a0d16;
  --sidebar-border:  rgba(255,255,255,0.06);
  --header-bg:       rgba(10,13,22,0.88);
  --header-border:   rgba(255,255,255,0.07);
  --card-bg:         #131726;
  --card-border:     rgba(255,255,255,0.07);
  --input-bg:        #0e1121;
  --input-border:    rgba(255,255,255,0.1);
  --input-focus:     rgba(0,212,168,0.25);
  --table-header-bg: #192033;
  --table-row-hover: rgba(255,255,255,0.025);
  --nav-active-bg:   rgba(0,212,168,0.07);
  --nav-active-border: #00d4a8;
  --nav-hover-bg:    rgba(255,255,255,0.04);
  --badge-bg:        rgba(0,212,168,0.15);
  --badge-text:      #00d4a8;
  --tag-ok-bg:       rgba(16,185,129,0.12);
  --tag-ok-text:     #10b981;
  --tag-warn-bg:     rgba(245,158,11,0.12);
  --tag-warn-text:   #f59e0b;
  --tag-danger-bg:   rgba(244,63,94,0.12);
  --tag-danger-text: #f43f5e;
  --modal-bg:        #131726;
  --modal-overlay:   rgba(0,0,0,0.72);
  --scrollbar-track: #0a0d16;
  --scrollbar-thumb: #2a3a52;
  --scrollbar-hover: #3a4f6a;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 4px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 36px rgba(0,0,0,0.55);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.35);
  --shadow-accent: 0 0 20px rgba(0,212,168,0.12);
  --glow-accent:   0 0 0 1px rgba(0,212,168,0.2);

  /* ── Login page ── */
  --login-bg:    #0a0d16;
  --login-card:  #131726;
  --login-noise: 1;

  /* ── Misc ── */
  --radius:      10px;
  --radius-lg:   14px;
  --font-sans:   'DM Sans', sans-serif;
  --font-mono:   'Space Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME 2 — LIGHT PROFESSIONAL
   Konsep: Enterprise dashboard, Notion/Linear/Stripe vibes
   Eye-comfort untuk kerja 8-12 jam
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Core Backgrounds ── */
  --bg:           #eef0f5;      /* Warm off-white, bukan #fff murni */
  --bg2:          #ffffff;
  --surface:      #ffffff;
  --surface2:     #f4f6fb;
  --surface3:     #eaecf4;

  /* ── Borders ── */
  --border:       rgba(0,0,0,0.08);
  --border2:      rgba(0,0,0,0.13);
  --border3:      rgba(0,0,0,0.2);

  /* ── Accent Colors ── */
  --accent:       #0ea5e9;      /* Sky blue - enterprise professional */
  --accent-hover: #0284c7;
  --accent2:      #7c3aed;      /* Violet secondary */
  --warn:         #d97706;
  --danger:       #dc2626;
  --success:      #059669;

  /* ── Text ── */
  --text:         #1e2a3b;      /* Dark blue-gray, bukan pure black */
  --text2:        #5a6a82;
  --text3:        #94a3b8;
  --text-on-accent: #ffffff;

  /* ── Component-Specific ── */
  --sidebar-bg:      #1e2a3b;   /* Dark sidebar - kontras elegan */
  --sidebar-border:  rgba(255,255,255,0.08);
  --header-bg:       rgba(238,240,245,0.92);
  --header-border:   rgba(0,0,0,0.08);
  --card-bg:         #ffffff;
  --card-border:     rgba(0,0,0,0.07);
  --input-bg:        #f8faff;
  --input-border:    rgba(0,0,0,0.12);
  --input-focus:     rgba(14,165,233,0.2);
  --table-header-bg: #f4f6fb;
  --table-row-hover: rgba(14,165,233,0.04);
  --nav-active-bg:   rgba(14,165,233,0.12);
  --nav-active-border: #0ea5e9;
  --nav-hover-bg:    rgba(255,255,255,0.08);
  --badge-bg:        rgba(14,165,233,0.12);
  --badge-text:      #0ea5e9;
  --tag-ok-bg:       rgba(5,150,105,0.1);
  --tag-ok-text:     #059669;
  --tag-warn-bg:     rgba(217,119,6,0.1);
  --tag-warn-text:   #d97706;
  --tag-danger-bg:   rgba(220,38,38,0.1);
  --tag-danger-text: #dc2626;
  --modal-bg:        #ffffff;
  --modal-overlay:   rgba(30,42,59,0.5);
  --scrollbar-track: #eef0f5;
  --scrollbar-thumb: #c2cdd9;
  --scrollbar-hover: #a8b6c5;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 6px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05);
  --shadow-accent: 0 4px 14px rgba(14,165,233,0.25);
  --glow-accent:   0 0 0 2px rgba(14,165,233,0.2);

  /* ── Login page ── */
  --login-bg:    #eef0f5;
  --login-card:  #ffffff;
  --login-noise: 0;
}

/* ── Light theme: body background & noise overlay ── */
[data-theme="light"] body {
  background: var(--bg);
}

[data-theme="light"] #login-page {
  background: linear-gradient(135deg, #eef0f5 0%, #e8ecf6 100%);
}

[data-theme="light"] .login-box {
  box-shadow: 0 20px 60px rgba(30,42,59,0.12), 0 0 0 1px rgba(0,0,0,0.06);
}

/* ── Light theme: sidebar stays dark ── */
[data-theme="light"] #sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255,255,255,0.06);
}

[data-theme="light"] #sidebar .nav-item {
  color: rgba(255,255,255,0.55);
}

[data-theme="light"] #sidebar .nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}

[data-theme="light"] #sidebar .nav-item.active {
  background: var(--nav-active-bg);
  border-left-color: var(--nav-active-border);
  color: var(--accent);
}

[data-theme="light"] #sidebar .logo-sub,
[data-theme="light"] #sidebar #sidebar-username,
[data-theme="light"] #sidebar .sidebar-section-label {
  color: rgba(255,255,255,0.35);
}

[data-theme="light"] #sidebar .logo-text {
  color: rgba(255,255,255,0.92);
}

[data-theme="light"] #sidebar #storage-info,
[data-theme="light"] #sidebar .sidebar-bottom {
  color: rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,0.07);
}

/* ── Light theme: header ── */
[data-theme="light"] #main-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(12px);
}

[data-theme="light"] #page-title {
  color: var(--text);
}

/* ── Light theme: main content area ── */
[data-theme="light"] #main-content {
  background: var(--bg);
}

[data-theme="light"] .page {
  background: var(--bg);
}

/* ── Light theme: cards ── */
[data-theme="light"] .kpi-card,
[data-theme="light"] .widget,
[data-theme="light"] .data-table-wrap,
[data-theme="light"] .report-card,
[data-theme="light"] .modal,
[data-theme="light"] .detail-panel {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow-card);
}

/* ── Light theme: inputs & selects ── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--input-focus) 0 0 0 3px;
}

/* ── Light theme: tables ── */
[data-theme="light"] .mini-table th,
[data-theme="light"] .data-table th,
[data-theme="light"] table th {
  background: var(--table-header-bg);
  color: var(--text2);
  border-bottom-color: var(--border);
}

[data-theme="light"] table td {
  border-bottom-color: var(--border);
  color: var(--text);
}

[data-theme="light"] tbody tr:hover {
  background: var(--table-row-hover);
}

/* ── Light theme: tags ── */
[data-theme="light"] .tag.tag-ok   { background: var(--tag-ok-bg);   color: var(--tag-ok-text); }
[data-theme="light"] .tag.tag-warn { background: var(--tag-warn-bg); color: var(--tag-warn-text); }
[data-theme="light"] .tag.tag-out  { background: var(--tag-danger-bg); color: var(--tag-danger-text); }

/* ── Light theme: buttons ── */
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
[data-theme="light"] .btn-primary:hover {
  background: var(--accent-hover);
}
[data-theme="light"] .btn-outline {
  border-color: var(--border2);
  color: var(--text);
  background: transparent;
}
[data-theme="light"] .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(14,165,233,0.05);
}

/* ── Light theme: action buttons ── */
[data-theme="light"] .action-btn {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text2);
}

/* ── Light theme: scan toast ── */
[data-theme="light"] .scan-toast {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border2);
}

/* ── Light theme: modal ── */
[data-theme="light"] .modal-overlay {
  background: var(--modal-overlay);
}

[data-theme="light"] .modal {
  background: var(--modal-bg);
  box-shadow: var(--shadow-lg);
}

/* ── Light theme: search bar ── */
[data-theme="light"] .search-bar,
[data-theme="light"] .search-wrap input {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

/* ── Light theme: KPI value colors ── */
[data-theme="light"] .kpi-val { color: var(--text); }
[data-theme="light"] .kpi-label { color: var(--text2); }

/* ── Light theme: nav section labels ── */
[data-theme="light"] .sidebar-section-label {
  color: rgba(255,255,255,0.3) !important;
}

/* ── Light theme: toggle/switch ── */
[data-theme="light"] .toggle-track {
  background: var(--surface3);
  border-color: var(--border);
}

/* ── Light theme: accordion ── */
[data-theme="light"] .accordion-header {
  background: var(--surface2);
  color: var(--text);
}
[data-theme="light"] .accordion-header:hover {
  background: var(--surface3);
}

/* ── Light theme: wos-toast ── */
[data-theme="light"] .wos-toast {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--text);
}

/* ── Light theme: wos confirm modal ── */
[data-theme="light"] .wos-modal-box {
  background: var(--modal-bg);
  border-color: var(--border2);
}

/* ── Light theme: noise overlay hidden ── */
[data-theme="light"] body::before,
[data-theme="light"] body::after {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME 3 — NEO / HYBRID GLASS
   Konsep: Dark navy + glassmorphism, luxury SaaS premium
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="neo"] {
  /* ── Core Backgrounds ── */
  --bg:           #06101e;      /* Deep navy */
  --bg2:          #0a1928;
  --surface:      rgba(255,255,255,0.05);
  --surface2:     rgba(255,255,255,0.08);
  --surface3:     rgba(255,255,255,0.12);

  /* ── Borders ── */
  --border:       rgba(255,255,255,0.09);
  --border2:      rgba(255,255,255,0.14);
  --border3:      rgba(255,255,255,0.2);

  /* ── Accent — gradient style ── */
  --accent:       #38bdf8;      /* Sky/cyan bright */
  --accent-hover: #7dd3fc;
  --accent2:      #a78bfa;      /* Violet */
  --accent-grad:  linear-gradient(135deg, #38bdf8, #a78bfa);
  --warn:         #fbbf24;
  --danger:       #fb7185;
  --success:      #34d399;

  /* ── Text ── */
  --text:         #e0eaf8;
  --text2:        #6d90b0;
  --text3:        #304560;
  --text-on-accent: #000;

  /* ── Component-Specific ── */
  --sidebar-bg:      rgba(6,16,30,0.9);
  --sidebar-border:  rgba(56,189,248,0.08);
  --header-bg:       rgba(6,16,30,0.7);
  --header-border:   rgba(56,189,248,0.08);
  --card-bg:         rgba(255,255,255,0.05);
  --card-border:     rgba(56,189,248,0.1);
  --input-bg:        rgba(255,255,255,0.06);
  --input-border:    rgba(255,255,255,0.12);
  --input-focus:     rgba(56,189,248,0.25);
  --table-header-bg: rgba(255,255,255,0.06);
  --table-row-hover: rgba(56,189,248,0.05);
  --nav-active-bg:   rgba(56,189,248,0.1);
  --nav-active-border: #38bdf8;
  --nav-hover-bg:    rgba(255,255,255,0.05);
  --badge-bg:        rgba(56,189,248,0.15);
  --badge-text:      #38bdf8;
  --tag-ok-bg:       rgba(52,211,153,0.12);
  --tag-ok-text:     #34d399;
  --tag-warn-bg:     rgba(251,191,36,0.12);
  --tag-warn-text:   #fbbf24;
  --tag-danger-bg:   rgba(251,113,133,0.12);
  --tag-danger-text: #fb7185;
  --modal-bg:        rgba(10,25,40,0.9);
  --modal-overlay:   rgba(0,0,0,0.8);
  --scrollbar-track: #06101e;
  --scrollbar-thumb: #1a3a5a;
  --scrollbar-hover: #255070;

  /* ── Shadows ── */
  --shadow-xs:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm:   0 4px 14px rgba(0,0,0,0.5), 0 0 1px rgba(56,189,248,0.08);
  --shadow-md:   0 6px 24px rgba(0,0,0,0.55), 0 0 2px rgba(56,189,248,0.1);
  --shadow-lg:   0 12px 44px rgba(0,0,0,0.65), 0 0 4px rgba(56,189,248,0.12);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(56,189,248,0.08);
  --shadow-accent: 0 0 30px rgba(56,189,248,0.2);
  --glow-accent:   0 0 0 1px rgba(56,189,248,0.25), 0 0 20px rgba(56,189,248,0.1);

  /* ── Glass effect ── */
  --glass-blur:  blur(16px);
  --glass-bg:    rgba(10,25,40,0.6);
  --glass-border: rgba(56,189,248,0.1);

  /* ── Login page ── */
  --login-bg:    #06101e;
  --login-card:  rgba(255,255,255,0.05);

  --radius:      12px;
  --radius-lg:   16px;
}

/* ── Neo theme: animated gradient background ── */
[data-theme="neo"] body {
  background: radial-gradient(ellipse at 20% 20%, rgba(56,189,248,0.06) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 80%, rgba(167,139,250,0.06) 0%, transparent 55%),
              #06101e;
  background-attachment: fixed;
}

/* ── Neo theme: glass cards ── */
[data-theme="neo"] .kpi-card,
[data-theme="neo"] .widget,
[data-theme="neo"] .data-table-wrap,
[data-theme="neo"] .report-card,
[data-theme="neo"] .detail-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
}

/* ── Neo theme: sidebar glass ── */
[data-theme="neo"] #sidebar {
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--sidebar-border);
}

/* ── Neo theme: header glass ── */
[data-theme="neo"] #main-header {
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
}

/* ── Neo theme: accent gradient on buttons ── */
[data-theme="neo"] .btn-primary {
  background: var(--accent-grad);
  color: #000;
}
[data-theme="neo"] .btn-primary:hover {
  filter: brightness(1.15);
}

/* ── Neo theme: KPI top border gradient ── */
[data-theme="neo"] .kpi-card::before {
  background: var(--accent-grad);
}

/* ── Neo theme: modal glass ── */
[data-theme="neo"] .modal {
  background: var(--modal-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
}

/* ── Neo theme: glow on active nav ── */
[data-theme="neo"] .nav-item.active {
  box-shadow: inset 0 0 20px rgba(56,189,248,0.04);
}

/* ── Neo theme: input glass ── */
[data-theme="neo"] .form-input,
[data-theme="neo"] .form-select,
[data-theme="neo"] input[type="text"],
[data-theme="neo"] input[type="password"],
[data-theme="neo"] select {
  background: var(--input-bg);
  backdrop-filter: blur(8px);
  border-color: var(--input-border);
}

/* ── Neo theme: tags ── */
[data-theme="neo"] .tag.tag-ok   { background: var(--tag-ok-bg);   color: var(--tag-ok-text); }
[data-theme="neo"] .tag.tag-warn { background: var(--tag-warn-bg); color: var(--tag-warn-text); }
[data-theme="neo"] .tag.tag-out  { background: var(--tag-danger-bg); color: var(--tag-danger-text); }

/* ── Neo theme: login glass card ── */
[data-theme="neo"] #login-page {
  background: radial-gradient(ellipse at 30% 30%, rgba(56,189,248,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 70%, rgba(167,139,250,0.08) 0%, transparent 60%),
              #06101e;
}
[data-theme="neo"] .login-box {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(56,189,248,0.15);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(56,189,248,0.08);
}

/* ── Neo theme: scan toast ── */
[data-theme="neo"] .scan-toast,
[data-theme="neo"] .wos-toast {
  backdrop-filter: blur(12px);
  background: rgba(10,25,40,0.85);
  border-color: rgba(56,189,248,0.2);
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR — All themes
   ═══════════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #2a3a52) var(--scrollbar-track, #0a0d16);
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ═══════════════════════════════════════════════════════════════════
   THEME SWITCHER UI
   ═══════════════════════════════════════════════════════════════════ */
#theme-switcher {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  align-items: center;
}

.theme-btn {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
  flex-shrink: 0;
}
.theme-btn:hover { transform: scale(1.1); }
.theme-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,0.3), 0 0 8px rgba(0,212,168,0.3); }

/* Dark preview */
.theme-btn[data-t="dark"]  { background: linear-gradient(135deg, #0a0d16 50%, #00d4a8 50%); }
/* Light preview */
.theme-btn[data-t="light"] { background: linear-gradient(135deg, #eef0f5 50%, #0ea5e9 50%); }
/* Neo preview */
.theme-btn[data-t="neo"]   { background: linear-gradient(135deg, #06101e 50%, #38bdf8 50%); }

.theme-btn-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); font-size: 10px;
  font-family: var(--font-mono, 'Space Mono', monospace);
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  letter-spacing: 0.05em;
}
.theme-btn:hover .theme-btn-tooltip { opacity: 1; }

#theme-switcher-label {
  font-size: 10px;
  font-family: var(--font-mono, 'Space Mono', monospace);
  color: var(--text3);
  letter-spacing: 0.1em;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ── Light theme: theme switcher ── */
[data-theme="light"] .theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 0 8px rgba(14,165,233,0.3);
}
[data-theme="light"] .theme-btn-tooltip {
  background: #1e2a3b;
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}