/* ==========================================================
   Liquidity sweep (ICT Turtle Soup) backtest page
   ========================================================== */
 
.project-page {
  /* Old colour names, pointed at the site's colours (site.css section 1) */
  --bg2: var(--surface);
  --bg3: var(--border);
  --tx1: var(--text);
  --tx2: var(--text-2);
  --tx3: color-mix(in srgb, var(--text-2) 65%, var(--bg));
  --br: var(--border);
  --br2: color-mix(in srgb, var(--text) 18%, transparent);
 
  /* Highlight colours: light mode */
  --green: #059669; --green-bg: #ecfdf5; --green-dk: #065f46;
  --amber: #d97706; --amber-bg: #fffbeb;
  --blue: #2563eb;  --blue-bg: #eff6ff;
  --purple: #7c3aed; --purple-bg: #f5f3ff;
  --red: #dc2626;   --red-bg: #fff1f2;
 
  font-size: 15px;
  line-height: 1.6;
 
  /* Highlight colours: dark mode */
  [data-theme="dark"] & {
    --green: #34d399; --green-bg: #022c22; --green-dk: #6ee7b7;
    --amber: #fbbf24; --amber-bg: #1c1200;
    --blue: #60a5fa;  --blue-bg: #0d1b3e;
    --purple: #a78bfa; --purple-bg: #1e0e3e;
    --red: #f87171;   --red-bg: #1c0505;
  }
 
  /* Basics (only inside this page) */
  *, *::before, *::after { margin: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }
 
  /* Page layout */
  .page-wrap { max-width: 860px; margin: 0 auto; padding: 0 40px 80px; }
  .page-hero { padding: 52px 0 40px; border-bottom: .5px solid var(--br); margin-bottom: 48px; }
  .back-link { font-size: 13px; color: var(--tx3); display: flex; align-items: center; gap: 6px; margin-bottom: 24px; }
  .back-link:hover { color: var(--tx1); }
  .project-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 980px; background: var(--green-bg); color: var(--green); margin-bottom: 16px; }
  .page-title { font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
  .page-sub { font-size: 17px; color: var(--tx2); line-height: 1.6; max-width: 600px; margin-bottom: 24px; }
  .meta-row { display: flex; gap: 20px; flex-wrap: wrap; }
  .meta-item { font-size: 12px; color: var(--tx3); }
  .meta-item strong { color: var(--tx1); font-weight: 500; }
 
  /* Stats strip */
  .stats-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 48px; }
  .stat-card { background: var(--bg2); border-radius: 16px; padding: 16px 18px; }
  .stat-label { font-size: 11px; color: var(--tx3); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
  .stat-value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
  .stat-note { font-size: 11px; color: var(--tx3); margin-top: 3px; }
 
  /* Section */
  .section { margin-bottom: 48px; }
  .section-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
  .section-sub { font-size: 14px; color: var(--tx2); line-height: 1.7; margin-bottom: 16px; }
 
  /* Cards */
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
  .card { background: var(--bg2); border-radius: 16px; padding: 16px 18px; }
  .card-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  .card-body { font-size: 12px; color: var(--tx2); line-height: 1.55; }
  .card-tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 980px; margin-top: 8px; font-weight: 500; }
  .tag-green { background: var(--green-bg); color: var(--green); }
  .tag-amber { background: var(--amber-bg); color: var(--amber); }
  .tag-red { background: var(--red-bg); color: var(--red); }
  .tag-blue { background: var(--blue-bg); color: var(--blue); }
  .tag-purple { background: var(--purple-bg); color: var(--purple); }
 
  /* Alert boxes */
  .alert { border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; font-size: 13px; line-height: 1.7; }
  .alert-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
  .alert-amber { background: var(--amber-bg); border-left: 3px solid var(--amber); }
  .alert-amber .alert-title { color: var(--amber); }
  .alert-green { background: var(--green-bg); border-left: 3px solid var(--green); }
  .alert-green .alert-title { color: var(--green); }
  .alert-blue { background: var(--blue-bg); border-left: 3px solid var(--blue); }
  .alert-blue .alert-title { color: var(--blue); }
  .alert-red { background: var(--red-bg); border-left: 3px solid var(--red); }
  .alert-red .alert-title { color: var(--red); }
 
  /* Improvements list */
  .improve-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .improve-item { background: var(--bg2); border-radius: 12px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
  .improve-num { width: 24px; height: 24px; border-radius: 50%; background: var(--purple-bg); color: var(--purple); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .improve-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .improve-desc { font-size: 12px; color: var(--tx2); line-height: 1.55; }
 
  /* Code block (always dark, like GitHub) */
  .code-wrap { background: #0d1117; border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
  .code-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #161b22; border-bottom: 1px solid #30363d; }
  .code-lang { font-size: 12px; color: #8b949e; font-family: var(--mono); }
  .code-copy { font-size: 11px; color: #8b949e; cursor: pointer; padding: 3px 8px; border-radius: 6px; background: transparent; border: .5px solid #30363d; transition: background .15s; font-family: inherit; }
  .code-copy:hover { background: #21262d; }
  pre { padding: 20px; overflow-x: auto; font-size: 12.5px; line-height: 1.65; color: #e6edf3; font-family: var(--mono); }
  .kw { color: #ff7b72; }
  .fn { color: #d2a8ff; }
  .st { color: #a5d6ff; }
  .cm { color: #8b949e; font-style: italic; }
  .nm { color: #79c0ff; }
  .op { color: #ffa657; }
 
  /* Table */
  .data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px; }
  .data-table th { padding: 8px 12px; background: var(--bg2); font-weight: 500; font-size: 11px; text-align: left; border-bottom: .5px solid var(--br2); color: var(--tx2); letter-spacing: .03em; }
  .data-table td { padding: 8px 12px; border-bottom: .5px solid var(--br); }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table .positive { color: var(--green); font-weight: 500; }
  .data-table .negative { color: var(--red); font-weight: 500; }
  .data-table .highlight { background: var(--green-bg); }
 
  /* Divider */
  hr { border: none; border-top: .5px solid var(--br); margin: 40px 0; }
 
  /* Phones */
  @media (max-width: 700px) {
    .page-wrap { padding: 0 20px 60px; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
  }
}