/* ==========================================================================
   CATBYTE — Demo Systems shell
   Sidebar + topbar + content layout, tables, modals, kanban, toasts, forms,
   receipt/print styling. Reuses the CSS variables defined in style.css so
   every demo matches the portfolio's dark navy / glass design system.
   ========================================================================== */

/* ==========================================================================
   Shell layout
   ========================================================================== */
html.demo-html, body.demo-body{
  height:100%;
  overflow-x:hidden;
}
.demo-shell{
  display:flex;
  min-height:100vh;
  padding-top:60px; /* topbar height */
}

/* ---- Topbar ---- */
.demo-topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:60px;
  z-index:120;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  background:var(--surface-navbar-scrolled);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.demo-topbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.demo-topbar-brand img{
  width:30px;height:30px;border-radius:8px;object-fit:cover;
  box-shadow:0 0 16px rgba(37,99,235,.4);
}
.demo-topbar-brand span{ color:#fff; font-weight:700; font-size:.95rem; }
.demo-mode-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.3rem .7rem;
  border-radius:99px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.4);
  color:#fcd34d;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
}
.demo-mode-badge i{ font-size:.65rem; }
.demo-topbar-spacer{ flex:1; }
.demo-topbar-icon{
  position:relative;
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  background:var(--surface-hairline);
  border:1px solid var(--border);
  transition:background .2s ease, color .2s ease;
}
.demo-topbar-icon:hover{ background:rgba(59,130,246,.12); color:#fff; }
.demo-topbar-icon .dot{
  position:absolute; top:6px; right:6px;
  width:7px;height:7px;border-radius:50%;
  background:#f87171;
  box-shadow:0 0 0 2px var(--surface-navbar-scrolled);
}
.demo-admin-chip{
  display:flex; align-items:center; gap:8px;
  padding:.35rem .6rem .35rem .35rem;
  border-radius:99px;
  background:var(--surface-hairline);
  border:1px solid var(--border);
  color:#fff;
  font-size:.82rem;
  font-weight:500;
}
.demo-admin-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff;
}
#demo-sidebar-toggle{ display:none; }

/* ---- Sidebar ---- */
.demo-sidebar{
  position:fixed;
  top:60px; bottom:0; left:0;
  width:250px;
  overflow-y:auto;
  background:var(--surface-sidebar);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-right:1px solid var(--border);
  padding:18px 14px 90px;
  z-index:110;
  transition:transform .3s ease;
}
@media (max-width:1023px){
  .demo-sidebar{ background:var(--surface-sidebar-mobile); }
}
.demo-sidebar-section-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-muted);
  font-weight:700;
  padding:14px 10px 6px;
}
.demo-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--text-secondary);
  font-size:.875rem;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
  margin-bottom:2px;
}
.demo-nav-item i{ width:18px; text-align:center; color:var(--text-muted); transition:color .2s ease; }
.demo-nav-item:hover{ background:var(--surface-hairline); color:#fff; }
.demo-nav-item.active{
  background:rgba(37,99,235,.14);
  color:#fff;
  border:1px solid rgba(59,130,246,.3);
}
.demo-nav-item.active i{ color:var(--accent); }
.demo-sidebar-footer{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:14px;
  border-top:1px solid var(--border);
  background:var(--surface-sidebar-footer);
  display:flex; flex-direction:column; gap:8px;
}

/* ---- Content ---- */
.demo-main{
  flex:1;
  margin-left:250px;
  padding:26px 26px 60px;
  min-width:0;
}
.demo-view{ display:none; }
.demo-view.active{ display:block; animation:demoFade .35s ease; }
@keyframes demoFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.demo-page-header{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px; margin-bottom:22px;
}
.demo-page-title{ font-size:1.5rem; font-weight:700; color:#fff; }
.demo-page-sub{ color:var(--text-muted); font-size:.85rem; margin-top:4px; }

/* Mobile sidebar off-canvas */
@media (max-width:1023px){
  .demo-sidebar{
    transform:translateX(-100%);
    box-shadow:20px 0 50px rgba(0,0,0,.5);
  }
  .demo-sidebar.open{ transform:translateX(0); }
  .demo-main{ margin-left:0; padding:18px 16px 50px; }
  #demo-sidebar-toggle{ display:flex; }
  .demo-admin-chip span{ display:none; }
}
.demo-sidebar-backdrop{
  display:none;
  position:fixed; inset:0; top:60px;
  background:rgba(0,0,0,.55);
  z-index:105;
}
.demo-sidebar-backdrop.show{ display:block; }

/* ==========================================================================
   Demo warning banner + status bar
   ========================================================================== */
.demo-warning-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.25);
  color:#fcd34d;
  font-size:.8rem;
  margin-bottom:20px;
}
.demo-status-bar{
  display:flex; flex-wrap:wrap; gap:16px;
  padding:10px 16px;
  border-radius:12px;
  background:var(--surface-card-2);
  border:1px solid var(--border);
  font-size:.75rem;
  color:var(--text-muted);
  margin-top:26px;
}
.demo-status-bar b{ color:var(--text-secondary); font-weight:600; }
.demo-status-bar .dot-ok{ width:7px;height:7px;border-radius:50%; background:var(--success); display:inline-block; margin-right:5px; box-shadow:0 0 6px var(--success); }

/* ==========================================================================
   Stat cards row (reuses .stat-card from style.css, adds trend colors)
   ========================================================================== */
.demo-stat-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin-bottom:22px; }
@media (min-width:640px){ .demo-stat-grid{ grid-template-columns:repeat(4,1fr); } }
.trend-up{ color:var(--success); }
.trend-down{ color:#f87171; }

/* ==========================================================================
   Tables
   ========================================================================== */
.demo-table-wrap{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface-card-2);
}
.demo-table-toolbar{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.demo-table-toolbar .field-input{ height:42px; font-size:.85rem; }
.demo-table-scroll{ overflow-x:auto; }
table.demo-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px; }
table.demo-table thead th{
  text-align:left;
  padding:12px 16px;
  color:var(--text-muted);
  font-weight:600;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  cursor:default;
  user-select:none;
}
table.demo-table thead th.sortable{ cursor:pointer; }
table.demo-table thead th.sortable:hover{ color:#fff; }
table.demo-table thead th .sort-icon{ margin-left:5px; opacity:.5; font-size:.65rem; }
table.demo-table tbody td{
  padding:12px 16px;
  color:var(--text-secondary);
  border-bottom:1px solid var(--surface-hairline);
  vertical-align:middle;
}
table.demo-table tbody tr:last-child td{ border-bottom:none; }
table.demo-table tbody tr:hover{ background:rgba(59,130,246,.05); }
.demo-row-actions{ display:flex; gap:6px; }
.demo-icon-btn{
  width:32px;height:32px;
  border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-hairline);
  border:1px solid var(--border);
  color:var(--text-secondary);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
  font-size:.8rem;
}
.demo-icon-btn:hover{ background:rgba(59,130,246,.14); color:#fff; border-color:rgba(59,130,246,.4); }
.demo-icon-btn.danger:hover{ background:rgba(248,113,113,.14); color:#fca5a5; border-color:rgba(248,113,113,.4); }

.demo-table-footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid var(--border);
}
.demo-pagination{ display:flex; gap:6px; align-items:center; }
.demo-page-btn{
  min-width:32px; height:32px; padding:0 8px;
  border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-btn-outline);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:.78rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.demo-page-btn:hover{ background:rgba(59,130,246,.12); color:#fff; }
.demo-page-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.demo-page-btn[disabled]{ opacity:.35; cursor:not-allowed; }
.demo-per-page{ width:auto; height:32px; font-size:.78rem; padding:0 10px; }

/* ==========================================================================
   Empty & loading states
   ========================================================================== */
.demo-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  padding:56px 20px;
  color:var(--text-muted);
  text-align:center;
}
.demo-empty i{ font-size:2rem; color:var(--text-muted); opacity:.6; }
.skeleton-row{ height:44px; border-radius:8px; margin:8px 16px; background:linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.07) 37%, rgba(255,255,255,.03) 63%); background-size:400% 100%; animation:skeletonShine 1.4s ease infinite; }
@keyframes skeletonShine{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.demo-spinner{
  width:18px;height:18px;
  border-radius:50%;
  border:2.5px solid var(--spinner-track);
  border-top-color:var(--text);
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   Modal
   ========================================================================== */
.demo-modal-overlay{
  position:fixed; inset:0;
  background:var(--surface-overlay);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:300;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.demo-modal-overlay.open{ opacity:1; pointer-events:auto; }
.demo-modal{
  width:100%; max-width:560px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.97);
  transition:transform .25s ease;
}
.demo-modal-overlay.open .demo-modal{ transform:translateY(0) scale(1); }
.demo-modal.modal-lg{ max-width:820px; }
.demo-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
  background:var(--card);
  z-index:2;
}
.demo-modal-header h3{ color:#fff; font-size:1.1rem; font-weight:700; }
.demo-modal-close{
  width:32px;height:32px; border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  background:var(--surface-hairline);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.demo-modal-close:hover{ background:rgba(248,113,113,.12); color:#fca5a5; }
.demo-modal-body{ padding:22px; }
.demo-modal-footer{
  display:flex; justify-content:flex-end; gap:10px;
  padding:16px 22px;
  border-top:1px solid var(--border);
}
.demo-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.demo-form-grid .col-span-2{ grid-column:1 / -1; }
@media (max-width:560px){ .demo-form-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toast-container{
  position:fixed;
  top:74px; right:16px;
  z-index:400;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(360px, calc(100vw - 32px));
}
.toast-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 14px;
  border-radius:14px;
  background:var(--surface-toast);
  border:1px solid var(--border);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  color:#fff;
  font-size:.85rem;
  transform:translateX(30px);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.toast-item.show{ transform:translateX(0); opacity:1; }
.toast-item.hide{ transform:translateX(30px); opacity:0; }
.toast-item i:first-child{ margin-top:2px; }
.toast-msg{ flex:1; line-height:1.5; }
.toast-close{ color:var(--text-muted); cursor:pointer; flex-shrink:0; }
.toast-close:hover{ color:#fff; }
.toast-success i:first-child{ color:var(--success); }
.toast-error i:first-child{ color:#f87171; }
.toast-warning i:first-child{ color:var(--warning); }
.toast-info i:first-child{ color:var(--accent); }

/* ==========================================================================
   Kanban (CRM Pipeline)
   ========================================================================== */
.kanban-board{
  display:flex; gap:14px;
  overflow-x:auto;
  padding-bottom:10px;
}
.kanban-column{
  flex:0 0 260px;
  background:var(--surface-card-2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  display:flex; flex-direction:column;
  min-height:200px;
  transition:border-color .2s ease, background .2s ease;
}
.kanban-column.drag-over{ border-color:var(--accent); background:rgba(6,182,212,.06); }
.kanban-column-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 4px; }
.kanban-column-title{ font-size:.8rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.kanban-count{ font-size:.7rem; color:var(--text-muted); background:var(--surface-hairline-strong); padding:2px 8px; border-radius:99px; }
.kanban-cards{ display:flex; flex-direction:column; gap:8px; min-height:60px; }
.kanban-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  cursor:grab;
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.kanban-card:hover{ border-color:rgba(59,130,246,.35); box-shadow:0 10px 24px rgba(2,6,23,.4); }
.kanban-card.dragging{ opacity:.4; }
.kanban-card-name{ color:#fff; font-weight:600; font-size:.85rem; }
.kanban-card-meta{ color:var(--text-muted); font-size:.72rem; margin-top:4px; }
.kanban-priority{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem; margin-top:8px; padding:2px 8px; border-radius:99px; }

/* ==========================================================================
   POS specific
   ========================================================================== */
.pos-product-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:var(--surface-card-2);
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease;
  text-align:left;
}
.pos-product-card:hover{ border-color:rgba(59,130,246,.4); transform:translateY(-2px); }
.pos-product-card[disabled], .pos-product-card.out-of-stock{ opacity:.4; cursor:not-allowed; }
.pos-product-thumb{
  width:100%; aspect-ratio:1/1;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(6,182,212,.18));
  display:flex;align-items:center;justify-content:center;
  color:var(--accent); font-size:1.4rem;
  margin-bottom:8px;
}
.pos-cart-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--hover-tint-strong); }
.pos-qty-btn{ width:26px;height:26px;border-radius:7px; background:var(--surface-hairline-strong); color:#fff; display:flex;align-items:center;justify-content:center; cursor:pointer; }
.pos-qty-btn:hover{ background:rgba(59,130,246,.2); }
.qr-placeholder{
  width:180px; height:180px; margin:0 auto;
  border-radius:14px;
  background:
    repeating-conic-gradient(#0b1327 0% 25%, #1e293b 0% 50%) 0 0/24px 24px,
    #fff;
  border:6px solid #fff;
  position:relative;
}
.qr-placeholder::after{
  content:"DEMO";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.82);
  color:#67e8f9;
  font-weight:800;
  letter-spacing:.08em;
  font-size:.9rem;
  border-radius:8px;
}

/* Receipt */
.receipt-paper{
  background:var(--receipt-bg);
  border:1px dashed var(--receipt-border);
  border-radius:12px;
  padding:20px;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  color:var(--receipt-text);
  max-width:340px;
  margin:0 auto;
}
.receipt-paper .receipt-line{ display:flex; justify-content:space-between; gap:10px; }
.receipt-divider{ border-top:1px dashed var(--receipt-border); margin:10px 0; }

/* ==========================================================================
   Automation console + progress
   ========================================================================== */
.automation-console{
  background:#05070f;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  line-height:1.85;
  height:280px;
  overflow-y:auto;
}
.automation-console .log-info{ color:var(--text-muted); }
.automation-console .log-success{ color:var(--success); }
.automation-console .log-warning{ color:var(--warning); }
.automation-console .log-error{ color:#f87171; }
.progress-track{
  height:10px;
  border-radius:99px;
  background:var(--surface-hairline-strong);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .3s ease;
  border-radius:99px;
}
.automation-drop{
  border:1.5px dashed var(--border);
  border-radius:14px;
  padding:26px;
  text-align:center;
  color:var(--text-muted);
  transition:border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.automation-drop:hover, .automation-drop.drag-over{ border-color:var(--accent); background:rgba(6,182,212,.05); }

/* ==========================================================================
   Calendar (Booking)
   ========================================================================== */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ text-align:center; font-size:.68rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; padding-bottom:4px; }
.cal-cell{
  min-height:78px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-card-2);
  padding:6px;
  font-size:.7rem;
  color:var(--text-muted);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.cal-cell:hover{ border-color:rgba(59,130,246,.35); }
.cal-cell.other-month{ opacity:.35; }
.cal-cell.today{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.cal-daynum{ color:#fff; font-weight:700; font-size:.75rem; }
.cal-booking-chip{
  display:block; margin-top:4px;
  padding:2px 6px; border-radius:6px;
  font-size:.62rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:767px){
  .cal-grid{ grid-template-columns:repeat(7, minmax(40px,1fr)); }
  .cal-cell{ min-height:56px; padding:4px; }
}

/* ==========================================================================
   Timeline (CRM lead detail)
   ========================================================================== */
.timeline-item{ position:relative; padding-left:24px; padding-bottom:18px; border-left:1.5px solid var(--border); margin-left:6px; }
.timeline-item:last-child{ border-color:transparent; padding-bottom:0; }
.timeline-dot{ position:absolute; left:-6.5px; top:2px; width:12px;height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(6,182,212,.2); }

/* ==========================================================================
   Print styles — receipts & reports only
   ========================================================================== */
@media print{
  .demo-topbar, .demo-sidebar, .demo-sidebar-backdrop, .demo-page-header,
  .demo-table-toolbar, .demo-table-footer, .toast-container, .no-print,
  #back-to-top, #float-contact-toggle, #float-contact-panel{ display:none !important; }
  .demo-main{ margin:0 !important; padding:0 !important; }
  body{ background:#fff !important; color:#000 !important; }
  .print-area{ display:block !important; }
}
.print-area{ display:none; }

/* Welcome / guide callouts */
.demo-guide-step{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--text-secondary); }
.demo-guide-num{
  flex-shrink:0; width:22px;height:22px; border-radius:50%;
  background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.35);
  color:var(--accent); font-size:.7rem; font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ==========================================================================
   Light theme overrides — demo shell
   Most surfaces already repaint via the shared var(--surface-*) tokens from
   style.css; these handle the remaining literal #fff text/decoration that
   only reads correctly on a dark surface. The QR mockup, print styles, and
   the automation console stay dark-always by design (print paper, a QR
   code, and a terminal-style log are conventionally dark-on-light or
   fixed-white regardless of site theme).
   ========================================================================== */
[data-theme="light"] .demo-topbar-brand span{ color:var(--text); }
[data-theme="light"] .demo-mode-badge{ color:var(--warning); }
[data-theme="light"] .demo-topbar-icon:hover{ color:var(--text); }
[data-theme="light"] .demo-admin-chip{ color:var(--text); }
[data-theme="light"] .demo-nav-item:hover{ color:var(--text); }
[data-theme="light"] .demo-nav-item.active{ color:var(--text); }
[data-theme="light"] .demo-page-title{ color:var(--text); }
[data-theme="light"] .demo-warning-banner{ color:var(--warning); }
[data-theme="light"] table.demo-table thead th.sortable:hover{ color:var(--text); }
[data-theme="light"] .demo-icon-btn:hover{ color:var(--text); }
[data-theme="light"] .demo-page-btn:hover{ color:var(--text); }
[data-theme="light"] .demo-modal-header h3{ color:var(--text); }
[data-theme="light"] .toast-item{ color:var(--text); }
[data-theme="light"] .toast-close:hover{ color:var(--text); }
[data-theme="light"] .kanban-column-title{ color:var(--text); }
[data-theme="light"] .kanban-card-name{ color:var(--text); }
[data-theme="light"] .pos-qty-btn{ color:var(--text); }
[data-theme="light"] .cal-daynum{ color:var(--text); }
[data-theme="light"] .skeleton-row{
  background:linear-gradient(90deg, rgba(15,23,42,.05) 25%, rgba(15,23,42,.09) 37%, rgba(15,23,42,.05) 63%);
  background-size:400% 100%;
}