/* Loop IQ Design System — light product palette, aligned to loopiq.com.au */
:root {
  /* Light product palette */
  --lq-indigo: #271257;       /* brand anchor, dark actions */
  --lq-indigo-700: #1c0d42;
  --lq-indigo-600: #3a2a6e;
  --lq-indigo-100: #f0eef8;
  --lq-indigo-50: #f8f6ff;    /* sidebar canvas */
  --lq-violet: #A99DD6;
  --lq-accent: #4330F5;       /* electric indigo — primary action */
  --lq-accent-soft: #e9e6fc;  /* soft wash for active nav */

  /* Ink */
  --lq-ink: #1c1c28;
  --lq-muted: #6b6b78;
  --lq-faint: #9a9aa6;

  /* Surfaces */
  --lq-line: #e8e5f2;         /* soft lavender rule */
  --lq-line-2: #f2f0f8;
  --lq-surface: #ffffff;
  --lq-canvas: #f7f5fc;       /* page canvas */
  --lq-sidebar: #f4f2fa;      /* sidebar background */

  /* Radii */
  --lq-radius: 14px;
  --lq-radius-sm: 10px;
  --lq-radius-lg: 18px;

  /* Shadows */
  --lq-shadow-sm: 0 1px 2px rgba(39,18,87,.04);
  --lq-shadow: 0 1px 2px rgba(39,18,87,.04), 0 6px 20px rgba(39,18,87,.06);
  --lq-shadow-lg: 0 4px 6px rgba(39,18,87,.05), 0 16px 40px rgba(39,18,87,.09);

  /* Semantic */
  --lq-success: #1d9e75;
  --lq-warn: #ba7517;
  --lq-danger: #d4537e;
  --lq-gov: #0c447c;

  /* Typography */
  --lq-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lq-font-head: "Sansation", "Poppins", -apple-system, sans-serif;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Cards */
.lq-card {
  background: var(--lq-surface);
  border: 1px solid var(--lq-line);
  border-radius: var(--lq-radius);
  box-shadow: var(--lq-shadow-sm);
  padding: 20px 22px;
}
.lq-card-lg {
  border-radius: var(--lq-radius-lg);
  padding: 24px 26px;
  box-shadow: var(--lq-shadow);
}

/* Typography primitives */
.lq-h { font-family: var(--lq-font-head); font-size: 20px; font-weight: 600; color: var(--lq-ink); letter-spacing: -.2px; margin: 0 0 2px; }
.lq-sub { font-size: 13.5px; color: var(--lq-muted); margin: 0 0 16px; }

/* Buttons */
.lq-btn {
  font: 600 13px/1 var(--lq-font);
  padding: 10px 16px;
  border-radius: var(--lq-radius-sm);
  border: 1px solid var(--lq-line);
  background: #fff;
  color: var(--lq-ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.lq-btn:hover { background: var(--lq-indigo-100); border-color: var(--lq-violet); }
.lq-btn-primary {
  background: var(--lq-accent);
  color: #fff;
  border-color: var(--lq-accent);
  box-shadow: 0 2px 8px rgba(67,48,245,.22);
}
.lq-btn-primary:hover { background: var(--lq-indigo-600); border-color: var(--lq-indigo-600); }

/* Toggle switch */
.lq-switch {
  width: 50px; height: 30px; border-radius: 20px;
  background: #e4e4ea; position: relative; cursor: pointer;
  transition: background .2s ease; display: inline-block; flex-shrink: 0;
}
.lq-switch.on { background: var(--lq-accent); }
.lq-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s ease;
}
.lq-switch.on::after { left: 23px; }

/* Badge */
.lq-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--lq-indigo-100); color: var(--lq-accent);
}
.lq-badge-gov { background: #e6f1fb; color: var(--lq-gov); }

/* Row */
.lq-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--lq-line-2);
}
.lq-row:last-child { border-bottom: 0; }

/* Product card (home screen 'Your products') */
.lq-product-card {
  background: var(--lq-surface);
  border: 1px solid var(--lq-line);
  border-radius: var(--lq-radius-lg);
  box-shadow: var(--lq-shadow);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  text-align: left;
  width: 100%;
  font: inherit;
}
.lq-product-card:hover {
  box-shadow: var(--lq-shadow-lg);
  border-color: var(--lq-accent);
  transform: translateY(-2px);
}
.lq-product-icon {
  width: 42px; height: 42px;
  background: var(--lq-indigo-50);
  border: 1px solid var(--lq-line);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lq-accent);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.lq-product-icon svg { width: 22px; height: 22px; }
.lq-product-name {
  font-family: var(--lq-font-head);
  font-size: 16px; font-weight: 700;
  color: var(--lq-ink); letter-spacing: -.01em;
  margin-bottom: 4px;
}
.lq-product-desc {
  font-size: 13px; color: var(--lq-muted); line-height: 1.5;
  flex: 1;
  margin-bottom: 16px;
}
.lq-product-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.lq-product-stat {
  display: flex; flex-direction: column; gap: 1px;
}
.lq-product-stat b {
  font-size: 18px; font-weight: 800;
  color: var(--lq-ink); letter-spacing: -.02em;
  font-family: var(--lq-font-head);
}
.lq-product-stat span {
  font-size: 11px; font-weight: 600; color: var(--lq-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.lq-product-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  color: var(--lq-accent);
  margin-top: auto;
}
.lq-product-cta svg { width: 14px; height: 14px; transition: transform .14s ease; }
.lq-product-card:hover .lq-product-cta svg { transform: translateX(3px); }
.lq-product-card.locked {
  opacity: .62;
  pointer-events: none;
}
.lq-product-card.locked .lq-product-cta { color: var(--lq-muted); }
.lq-product-lock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--lq-muted);
  background: var(--lq-line-2); border: 1px solid var(--lq-line);
  border-radius: 999px; padding: 3px 9px; margin-top: auto;
}

/* Product grid */
.lq-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 4px 0 24px;
}
@media (max-width: 820px) {
  .lq-product-grid { grid-template-columns: 1fr; }
}

/* Home page regulatory-tools strip (WGS-108) */
.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}
.home-tool-card {
  background: var(--lq-surface);
  border: 1px solid var(--lq-line);
  border-radius: var(--lq-radius-lg);
  box-shadow: var(--lq-shadow);
  padding: 18px 20px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  text-align: left;
  width: 100%;
  font: inherit;
}
.home-tool-card:hover {
  box-shadow: var(--lq-shadow-lg);
  border-color: var(--lq-accent);
  transform: translateY(-1px);
}
.home-tool-icon {
  width: 40px; height: 40px;
  background: var(--lq-indigo-50);
  border: 1px solid var(--lq-line);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lq-accent);
  flex-shrink: 0;
}
.home-tool-icon svg { width: 20px; height: 20px; }
.home-tool-body { flex: 1; min-width: 0; }
.home-tool-name {
  display: block;
  font-family: var(--lq-font-head);
  font-size: 14px; font-weight: 700;
  color: var(--lq-ink); letter-spacing: -.01em;
  margin-bottom: 2px;
}
.home-tool-desc {
  display: block;
  font-size: 12px; color: var(--lq-muted); line-height: 1.45;
}
.home-tool-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--lq-accent);
  flex-shrink: 0;
}
.home-tool-cta svg { width: 13px; height: 13px; transition: transform .14s ease; }
.home-tool-card:hover .home-tool-cta svg { transform: translateX(3px); }
@media (max-width: 820px) {
  .home-tools-grid { grid-template-columns: 1fr; }
}