:root {
      --c1xx-bg:#f0f6ff;--c1xx-border:#bdd4f5;--c1xx-text:#1354a3;--c1xx-badge:#deeafc;--c1xx-dot:#1354a3;
      --c2xx-bg:#edfbf3;--c2xx-border:#b6e8cb;--c2xx-text:#1a7a45;--c2xx-badge:#d2f5e2;--c2xx-dot:#1a7a45;
      --c3xx-bg:#fff8ed;--c3xx-border:#fad9a0;--c3xx-text:#8a5a00;--c3xx-badge:#fdecc5;--c3xx-dot:#c87d00;
      --c4xx-bg:#fff3ed;--c4xx-border:#f5c5a0;--c4xx-text:#9a3d10;--c4xx-badge:#fddec5;--c4xx-dot:#c85020;
      --c5xx-bg:#fff0f0;--c5xx-border:#f5c0c0;--c5xx-text:#b03030;--c5xx-badge:#fdd8d8;--c5xx-dot:#b03030;
    }
 
    .category-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
    .cat-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;text-decoration:none;border:1.5px solid;transition:opacity 0.15s;}
    .cat-pill:hover{opacity:0.8;text-decoration:none;}
    .cat-pill-dot{width:7px;height:7px;border-radius:50%;}
    .cat-pill.c1xx{background:var(--c1xx-badge);color:var(--c1xx-text);border-color:var(--c1xx-border);}
    .cat-pill.c1xx .cat-pill-dot{background:var(--c1xx-dot);}
    .cat-pill.c2xx{background:var(--c2xx-badge);color:var(--c2xx-text);border-color:var(--c2xx-border);}
    .cat-pill.c2xx .cat-pill-dot{background:var(--c2xx-dot);}
    .cat-pill.c3xx{background:var(--c3xx-badge);color:var(--c3xx-text);border-color:var(--c3xx-border);}
    .cat-pill.c3xx .cat-pill-dot{background:var(--c3xx-dot);}
    .cat-pill.c4xx{background:var(--c4xx-badge);color:var(--c4xx-text);border-color:var(--c4xx-border);}
    .cat-pill.c4xx .cat-pill-dot{background:var(--c4xx-dot);}
    .cat-pill.c5xx{background:var(--c5xx-badge);color:var(--c5xx-text);border-color:var(--c5xx-border);}
    .cat-pill.c5xx .cat-pill-dot{background:var(--c5xx-dot);}
 
    .search-bar-section{background:var(--white);border-bottom:1px solid var(--blue-border);}
    .search-bar-wrap{padding:20px 40px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;max-width:1280px;margin:0 auto;}
    .search-input-wrap{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;background:var(--blue-pale);border:1.5px solid var(--blue-border2);border-radius:var(--radius-sm);padding:9px 14px;transition:border-color 0.2s;}
    .search-input-wrap:focus-within{border-color:var(--blue-brand);}
    .search-input-wrap svg{width:15px;height:15px;color:var(--text-hint);flex-shrink:0;}
    .search-input-wrap input{border:none;outline:none;background:transparent;font-size:14px;color:var(--blue-dark);width:100%;font-family:inherit;}
    .search-input-wrap input::placeholder{color:var(--text-hint);}
    .search-count{font-size:13px;color:var(--text-muted);white-space:nowrap;}
    .search-count strong{color:var(--blue-dark);font-weight:700;}
 
    .content-layout{display:grid;grid-template-columns:250px 1fr;align-items:start;max-width:1280px;margin:0 auto;}
 
    .toc{padding:36px 20px 36px 40px;position:sticky;top:var(--nav-height);max-height:100vh;overflow-y:auto;}
    .toc-title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;}
    .toc-group{margin-bottom:6px;}
    .toc-cat-link{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;color:var(--text-body);text-decoration:none;transition:background 0.15s,color 0.15s;}
    .toc-cat-link:hover{background:var(--blue-pale);color:var(--blue-brand);text-decoration:none;}
    .toc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
    .toc-dot.d1{background:var(--c1xx-dot);}
    .toc-dot.d2{background:var(--c2xx-dot);}
    .toc-dot.d3{background:var(--c3xx-dot);}
    .toc-dot.d4{background:var(--c4xx-dot);}
    .toc-dot.d5{background:var(--c5xx-dot);}
 
    .codes-content{padding:40px 40px 64px 36px;border-left:1px solid var(--blue-border);}
    .no-results{display:none;text-align:center;padding:56px 20px;color:var(--text-muted);font-size:14px;}
 
    .category-section{margin-bottom:48px;scroll-margin-top:calc(var(--nav-height) + 20px);}
    .category-header{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding-bottom:14px;border-bottom:2px solid;}
    .category-header.c1xx{border-color:var(--c1xx-border);}
    .category-header.c2xx{border-color:var(--c2xx-border);}
    .category-header.c3xx{border-color:var(--c3xx-border);}
    .category-header.c4xx{border-color:var(--c4xx-border);}
    .category-header.c5xx{border-color:var(--c5xx-border);}
    .category-badge{font-size:12px;font-weight:700;padding:4px 13px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
    .c1xx .category-badge{background:var(--c1xx-badge);color:var(--c1xx-text);}
    .c2xx .category-badge{background:var(--c2xx-badge);color:var(--c2xx-text);}
    .c3xx .category-badge{background:var(--c3xx-badge);color:var(--c3xx-text);}
    .c4xx .category-badge{background:var(--c4xx-badge);color:var(--c4xx-text);}
    .c5xx .category-badge{background:var(--c5xx-badge);color:var(--c5xx-text);}
    .category-header h2{font-size:20px;font-weight:800;color:var(--blue-dark);letter-spacing:-0.3px;flex:1;}
    .category-count{font-size:12px;color:var(--text-muted);font-weight:500;background:var(--blue-pale);border:1px solid var(--blue-border);padding:3px 10px;border-radius:20px;}
    .category-desc{font-size:13.5px;color:var(--text-muted);line-height:1.65;margin-bottom:18px;}
 
    .codes-list{border:1px solid var(--blue-border);border-radius:var(--radius-lg);overflow:hidden;}
    .code-row{display:grid;grid-template-columns:72px 1fr auto;border-bottom:1px solid var(--blue-border);text-decoration:none;transition:background 0.15s;align-items:center;}
    .code-row:last-child{border-bottom:none;}
    .code-row:hover{text-decoration:none;}
    .c1xx .code-row:hover{background:var(--c1xx-bg);}
    .c2xx .code-row:hover{background:var(--c2xx-bg);}
    .c3xx .code-row:hover{background:var(--c3xx-bg);}
    .c4xx .code-row:hover{background:var(--c4xx-bg);}
    .c5xx .code-row:hover{background:var(--c5xx-bg);}
    .code-row-num{padding:14px 0 14px 18px;font-size:16px;font-weight:800;font-family:'Courier New',monospace;letter-spacing:-0.3px;line-height:1;}
    .c1xx .code-row-num{color:var(--c1xx-text);}
    .c2xx .code-row-num{color:var(--c2xx-text);}
    .c3xx .code-row-num{color:var(--c3xx-text);}
    .c4xx .code-row-num{color:var(--c4xx-text);}
    .c5xx .code-row-num{color:var(--c5xx-text);}
    .code-row-body{padding:14px 16px;}
    .code-row-name{font-size:14px;font-weight:700;color:var(--blue-dark);margin-bottom:3px;line-height:1.3;}
    .code-row-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
    .code-row-arrow{padding:14px 18px 14px 8px;color:var(--text-hint);flex-shrink:0;}
    .code-row-arrow svg{width:14px;height:14px;display:block;}
    .code-row:hover .code-row-arrow{color:var(--blue-brand);}
 
    @media(max-width:820px){
      .search-bar-wrap{padding:16px 20px;}
      .content-layout{grid-template-columns:1fr;}
      .toc{display:none;}
      .codes-content{padding:28px 20px 48px;border-left:none;}
    }
    @media(max-width:480px){
      .category-pills{gap:7px;}
      .code-row{grid-template-columns:60px 1fr auto;}
    }
 
  /* Category badge colours */
  .code-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; padding: 5px 14px;
    border-radius: 20px; letter-spacing: 0.3px;
  }
 
  .code-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
 
  .badge-info     { background: var(--blue-pale);  color: var(--blue-brand); }
  .badge-info     .code-badge-dot { background: var(--blue-brand); }
  .badge-success  { background: #edfbf3; color: #1a7a45; }
  .badge-success  .code-badge-dot { background: #1a7a45; }
  .badge-redirect { background: #fff8ed; color: #8a5a00; }
  .badge-redirect .code-badge-dot { background: #c87d00; }
  .badge-client   { background: #fff3ed; color: #9a3d10; }
  .badge-client   .code-badge-dot { background: #c85020; }
  .badge-server   { background: #fff0f0; color: #b03030; }
  .badge-server   .code-badge-dot { background: #b03030; }
 
  /* Page header */
  .code-hero {
    background: linear-gradient(150deg, var(--blue-pale) 0%, #e8f0fe 60%, #dceeff 100%);
    border-bottom: 1px solid var(--blue-border);
  }
 
  .code-hero .inner { padding: 48px 40px 40px; }
 
  .code-hero-meta {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-bottom: 16px;
  }
 
  .code-number {
    font-size: 52px; font-weight: 800; color: var(--blue-dark);
    letter-spacing: -2px; line-height: 1;
  }
 
  .code-divider {
    width: 2px; height: 44px; background: var(--blue-border2);
    border-radius: 2px; flex-shrink: 0;
  }
 
  .code-name {
    font-size: 26px; font-weight: 800; color: var(--blue-dark);
    letter-spacing: -0.4px; line-height: 1.2;
  }
 
  .code-hero p {
    font-size: 15px; color: var(--text-body);
    max-width: 600px; line-height: 1.7; margin-top: 10px;
  }
 
  /* Main layout */
  .code-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    align-items: start;
    padding: 48px 40px 64px;
    max-width: 1280px;
    margin: 0 auto;
  }
 
  /* Article content */
  .code-article h3 {
    font-size: 18px; font-weight: 800; color: var(--blue-dark);
    margin: 28px 0 12px; letter-spacing: -0.3px;
  }
 
  .code-article h3:first-child { margin-top: 0; }
 
  .code-article p {
    font-size: 14.5px; color: var(--text-body);
    line-height: 1.8; margin-bottom: 14px;
  }
 
  .code-article ul, .code-article ol {
    padding-left: 0; list-style: none;
    margin-bottom: 18px;
  }
 
  .code-article ul li, .code-article ol li {
    font-size: 14.5px; color: var(--text-body);
    line-height: 1.75; padding: 6px 0 6px 26px;
    position: relative;
    /*border-bottom: 1px solid var(--blue-border);*/
  }
 
  .code-article ul li:last-child,
  .code-article ol li:last-child { border-bottom: none; }
 
  .code-article ul li::before {
    content: '';
    position: absolute; left: 6px; top: 14px;
    width: 7px; height: 7px;
    background: var(--blue-mid); border-radius: 50%;
  }
 
  .code-article ol { counter-reset: item; }
  .code-article ol li { counter-increment: item; }
  .code-article ol li::before {
    content: counter(item);
    position: absolute; left: 0; top: 6px;
    width: 20px; height: 20px;
    background: var(--blue-light); color: var(--blue-brand);
    font-size: 11px; font-weight: 700;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    text-align: center; line-height: 20px;
  }
 
  .code-article a { color: var(--blue-brand); font-weight: 500; }
  .code-article a:hover { text-decoration: underline; }
 
  /* Section divider */
  .code-article hr {
    border: none; border-top: 1px solid var(--blue-border);
    margin: 32px 0;
  }
 
  /* Sidebar */
  .code-sidebar { display: flex; flex-direction: column; gap: 20px; }
 
  /* Screenshot card */
  .screenshot-card {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
 
  .screenshot-card img {
    display: block; width: 100%; height: auto;
    border-bottom: 1px solid var(--blue-border);
  }
 
  /* Related codes card */
/*  .related-card {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
 
  .related-card-title {
    padding: 14px 18px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-muted);
    background: var(--blue-pale);
    border-bottom: 1px solid var(--blue-border);
  }
 
  .related-card ul { list-style: none; }
 
  .related-card ul li {
    border-bottom: 1px solid var(--blue-border);
  }
 
  .related-card ul li:last-child { border-bottom: none; }
 
  .related-card ul li a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    font-size: 13.5px; color: var(--text-body);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
 
  .related-card ul li a:hover {
    background: var(--blue-pale); color: var(--blue-brand);
  }
 
  .related-card ul li.current a {
    background: var(--blue-light);
    color: var(--blue-brand);
    font-weight: 700;
    pointer-events: none;
  }
 
  .related-code-num {
    font-size: 12px; font-weight: 700;
    color: var(--blue-brand); font-family: 'Courier New', monospace;
    min-width: 32px; flex-shrink: 0;
  }
 
  .related-card ul li.current .related-code-num { color: var(--blue-brand); }*/
 
  /* Quick facts card */
  .facts-card {
    background: var(--blue-pale);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-lg);
    padding: 18px 18px;
  }
 
  .facts-card-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 14px;
  }
 
  .fact-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--blue-border);
    font-size: 13px;
  }
 
  .fact-row:last-child { border-bottom: none; padding-bottom: 0; }
 
  .fact-label { color: var(--text-muted); font-weight: 500; }
  .fact-value { color: var(--blue-dark); font-weight: 700; }
 
  /* Try it CTA */
  .try-cta {
    background: var(--blue-dark);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    text-align: center;
  }
 
  .try-cta p {
    font-size: 13px; color: #8ab0d8;
    line-height: 1.6; margin-bottom: 14px;
  }
 
  .try-cta a {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--white); color: var(--blue-brand);
    border-radius: var(--radius-sm); padding: 10px 20px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: background 0.15s; width: 100%;
  }
 
  .try-cta a:hover { background: var(--blue-pale); text-decoration: none; }
  .try-cta a svg { width: 14px; height: 14px; }
 
  /* ── Responsive ─────────────────────────────────────── */
  @media (max-width: 820px) {
    .code-hero .inner { padding: 36px 20px 28px; }
    .code-number { font-size: 40px; }
    .code-name { font-size: 22px; }
    .code-layout { grid-template-columns: 1fr; padding: 32px 20px 48px; }
    .code-sidebar { order: -1; }
    .screenshot-card { display: none; }
  }
 
    /* ─── RESPONSIVE ──────────────────────────────────── */
    @media (max-width: 820px) {
      .search-bar-wrap { padding: 16px 20px; }
      .content-layout { grid-template-columns: 1fr; }
      .toc { display: none; }
      .codes-content { padding: 28px 20px 48px; }
      .code-body { padding-left: 18px; }
    }
 
    @media (max-width: 480px) {
      .code-short { display: none; }
    }