:root{
    --bg:#ffffff;
    --ink:#0f172a;
    --muted:#475569;
    --line:#e2e8f0;
    --ring:#2563eb;
    --card:#ffffff;
    --shadow:0 8px 18px rgba(2,6,23,.08);
    --pill1:#f59e0b;
    --pill2:#eab308;
    --pill3:#fde68a;
    --radius:16px;
    --maxw:1200px;
  }

  * { box-sizing:border-box; }
  html, body { height:100%; }

  body {
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    margin:0;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .docs {
    width:100%;
    padding:56px 5vw 80px;
  }
  .docs .container {
    max-width:var(--maxw);
    margin:0 auto;
  }

  .docs-head {
    text-align:center;
    margin-bottom:28px;
  }
  .docs-head h3 {
    margin:0 0 8px;
    font-size:clamp(24px,2.6vw,34px);
    font-weight:900;
    color:var(--ink);
    letter-spacing:-.02em;
  }
  .docs-head p {
    margin:0;
    color:var(--muted);
    font-size:clamp(14px,1.6vw,16px);
  }

  .docs-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
    margin-top:26px;
  }

  .doc-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:var(--shadow);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .doc-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(2,6,23,.12);
    border-color: rgba(30,144,255,.35);
  }

  .doc-head {
    display:flex;
    align-items:center;
    gap:12px;
  }
  .doc-ico {
    width:44px;
    height:44px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#f1f5f9;
    border:1px solid var(--line);
  }
  .doc-ico i {
    font-size:18px;
    color:#1e3a8a;
  }

  .doc-title {
    margin:0;
    font-size:18px;
    color:var(--ink);
    line-height:1.25;
  }
  .doc-desc {
    margin:0;
    color:var(--muted);
    font-size:14.8px;
    line-height:1.6;
  }

  .doc-meta {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    color:#64748b;
    font-size:13px;
  }
  .doc-meta i {
    margin-right:6px;
  }

  .doc-actions {
    margin-top:auto;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .pill {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.62rem 1rem;
    border-radius:999px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    color:#0b1220;
    background:linear-gradient(135deg,var(--pill1),var(--pill2) 46%,var(--pill3));
    border:1px solid rgba(0,0,0,.06);
    transition: filter .15s ease, transform .15s ease;
  }
  .pill:hover {
    filter:brightness(.98);
    transform: translateY(-1px);
  }
  .pill:focus-visible {
    outline:2px solid var(--ring);
    outline-offset:2px;
  }

  .muted-link {
    color:var(--muted);
    text-decoration:none;
    font-size:13.2px;
    padding:.55rem .75rem;
    border-radius:10px;
    border:1px dashed transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .muted-link:hover {
    color:var(--ink);
    background:rgba(2,6,23,.04);
    border-color:var(--line);
  }
  .muted-link:focus-visible {
    outline:2px solid var(--ring);
    outline-offset:2px;
  }

  @media print {
    .pill, .muted-link { display:none !important; }
    .doc-card {
      break-inside:avoid;
      box-shadow:none;
      background:#fff;
    }
    body{ background:#fff; color:#000; }
  }

  @media (prefers-reduced-motion:reduce){
    .doc-card, .pill { transition:none; }
  }