﻿* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --color-primary: #2563eb;
      --color-primary-hover: #1d4ed8;
      --color-cyan: #06b6d4;
      --color-text-primary: #1f2937;
      --color-text-secondary: #6b7280;
      --color-text-muted: #9ca3af;
      --color-bg-base: #ffffff;
      --color-bg-light: #f9fafb;
      --color-bg-subtle: #f3f4f6;
      --color-border: #e5e7eb;
      --color-border-light: #f3f4f6;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--color-bg-base);
      color: var(--color-text-primary);
      line-height: 1.6;
    }

    

    /* MAIN CONTENT */
    main {
      max-width: 900px;
      margin: 3rem auto;
      padding: 0 2rem;
    }

    .breadcrumb {
      font-size: 0.9rem;
      color: var(--color-text-secondary);
      margin-bottom: 2rem;
    }

    .breadcrumb a {
      color: var(--color-primary);
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    main h1 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--color-text-primary);
      margin-bottom: 0.5rem;
    }

    .last-updated {
      font-size: 0.85rem;
      color: var(--color-text-secondary);
      margin-bottom: 2rem;
      font-style: italic;
    }

    main h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-top: 2rem;
      margin-bottom: 1rem;
      border-bottom: 2px solid var(--color-border);
      padding-bottom: 0.5rem;
    }

    main h3 {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
    }

    main p {
      margin-bottom: 1rem;
      text-align: justify;
    }

    main a {
      color: var(--color-primary);
      text-decoration: none;
      transition: color 0.2s;
    }

    main a:hover {
      color: var(--color-primary-hover);
      text-decoration: underline;
    }

    main ul, main ol {
      margin-left: 2rem;
      margin-bottom: 1rem;
    }

    main li {
      margin-bottom: 0.5rem;
    }

    main table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.5rem 0;
    }

    main th, main td {
      border: 1px solid var(--color-border);
      padding: 0.75rem;
      text-align: left;
    }

    main th {
      background-color: var(--color-bg-subtle);
      font-weight: 600;
      color: var(--color-text-primary);
    }

    main tr:nth-child(even) {
      background-color: var(--color-bg-light);
    }

    .info-box {
      background-color: var(--color-bg-subtle);
      padding: 1.5rem;
      border-left: 4px solid var(--color-primary);
      margin: 1.5rem 0;
    }

    .highlight-box {
      background-color: #dbeafe;
      padding: 1.5rem;
      border-left: 4px solid var(--color-primary);
      margin: 1.5rem 0;
      border-radius: 0.375rem;
    }
    /* MAIN CONTENT END */

    

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-actions .btn-secondary { display: none; }

      h1 {
        font-size: 1.5rem;
      }

      h2 {
        font-size: 1.25rem;
      }
    }
    /* RESPONSIVE END */
