:root {
  
  --brand: var(--qf-primary);
  --brand-2: color-mix(in srgb, var(--qf-primary) 72%, var(--qf-accent));
  --brand-3: var(--qf-accent);
  --accent: var(--qf-accent);
  --brand-grad: var(--qf-brand-grad);
  --brand-grad-soft: var(--qf-brand-grad-soft);
  --brand-glow: var(--qf-brand-glow);   

  
  --brand-deep: var(--qf-primary-hover);
  --brand-ink: var(--qf-primary-hover);
  --brand-soft: #eef3fd;            
  --brand-soft-2: #dbe7fb;

  
  --bg: #fbfcfe;
  --bg-2: #f4f6fb;                  
  --bg-soft: #f4f6fb;               
  --card: #ffffff;

  
  --ink: #0f1729;
  --ink-2: #3f4a63;
  --muted: #5b6478;

  
  --line: #e4e8f0;
  --line-2: #edf0f6;
  --line-strong: #cbd3e1;

  
  --ok: #047857;      --ok-soft: #e7f6ef;
  --warn: #b45309;    --warn-soft: #fdf3e3;
  --bad: #b91c1c;     --danger: #b91c1c;   --danger-soft: #fdeceb;
  

  
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --r-sm: 8px;

  
  --shadow-sm: 0 1px 2px rgba(15, 23, 41, .06), 0 1px 3px rgba(15, 23, 41, .04);
  --shadow: 0 4px 12px -2px rgba(15, 23, 41, .10), 0 2px 6px -2px rgba(15, 23, 41, .06);
  --shadow-lg: 0 18px 40px -12px rgba(15, 23, 41, .18), 0 8px 16px -8px rgba(15, 23, 41, .10);

  
  --maxw: 1200px;                   

  
  --scroll-thumb: #cbd3e1;
  --scroll-thumb-hover: #a9b4c9;
}



[data-theme="dark"] {
  --brand: var(--qf-primary);       
  --brand-2: color-mix(in srgb, var(--qf-primary) 72%, var(--qf-accent));
  --brand-3: var(--qf-accent);
  --accent: var(--qf-accent);
  --brand-grad: var(--qf-brand-grad);
  --brand-grad-soft: var(--qf-brand-grad-soft);
  --brand-glow: var(--qf-brand-glow);

  --brand-deep: var(--qf-primary-hover);
  --brand-ink: color-mix(in srgb, var(--qf-primary-hover) 78%, #fff);
  --brand-soft: var(--qf-primary-soft);
  --brand-soft-2: color-mix(in srgb, var(--qf-primary) 26%, transparent);

  --bg: #070a12;
  --bg-2: #0d1220;
  --bg-soft: #0d1220;
  --card: #131a2a;

  --ink: #e7ecf7;
  --ink-2: #c3cddf;
  --muted: #98a4bd;

  --line: #232d43;
  --line-2: #1c2438;
  --line-strong: #33405c;

  --ok: #34d399;      --ok-soft: rgba(52, 211, 153, .14);
  --warn: #fbbf24;    --warn-soft: rgba(251, 191, 36, .14);
  --bad: #f87171;     --danger: #f87171;   --danger-soft: rgba(248, 113, 113, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow: 0 6px 16px -4px rgba(0, 0, 0, .55);
  --shadow-lg: 0 22px 48px -14px rgba(0, 0, 0, .70);

  --scroll-thumb: #33405c;
  --scroll-thumb-hover: #4a5a7d;
}


.nav-links a { white-space: nowrap; }   
.nav-links a[target="_blank"]::after {
  content: "\2197";                     
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  margin-left: 3px;
  vertical-align: 1.5px;
  opacity: .6;
  transition: opacity 120ms ease;
}
.nav-links a[target="_blank"]:hover::after { opacity: 1; }



.footer-col a[target="_blank"]::after {
  content: "\2197";                     
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  margin-left: 3px;
  vertical-align: 1.5px;
  opacity: .6;
  transition: opacity 120ms ease;
}
.footer-col a[target="_blank"]:hover::after { opacity: 1; }


.footer-bottom {
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.qf-bottom-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qf-bottom-links a { white-space: nowrap; }
.qf-bottom-links a[target="_blank"]::after {
  content: "\2197";
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  margin-left: 2px;
  vertical-align: 1.5px;
  opacity: .6;
}
.qf-bottom-links a[target="_blank"]:hover::after { opacity: 1; }