:root {
      --bg: #f7f9fb;
      --bg-soft: #ffffff;
      --text: #0f172a;  /* slate-900 */
      --muted: #64748b; /* slate-500 */
      --line: #e2e8f0;  /* slate-200 */
      --brand: #0369a1; /* sky-700 */
      --brand-2: #0ea5e9; /* sky-500 */
      --ring: rgba(14,165,233,.25);
      --success-bg: #dcfce7; --success-fg: #166534;
      --warn-bg: #fef3c7; --warn-fg: #92400e;
      --info-bg: #e0f2fe; --info-fg: #075985;
    }
    body.dark {
        background: linear-gradient(135deg, #020f20 0%, #020f20 50%, #020f20 100%); /* paramedic dark */
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
      --bg: #0b1220;
      --bg-soft: #0f172a;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --line: #1f2937;
      --brand: #38bdf8;
      --brand-2: #7dd3fc;
      --ring: rgba(56,189,248,.25);
      --success-bg: #052e16; --success-fg: #86efac;
      --warn-bg: #451a03; --warn-fg: #fde68a;
      --info-bg: #082f49; --info-fg: #7dd3fc;
    }

    /* Reset ringan */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: linear-gradient(180deg, var(--bg), #ffffff 60%, var(--bg)) fixed; color: var(--text); }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }

    .container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

    /* Header */
    header.site { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg-soft) 80%, transparent); border-bottom: 1px solid var(--line); }
    .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 12px; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-logo 
    .brand-title { line-height: 1.1; }
    .brand-title h1 { font-size: 18px; margin: 0 0 4px; }
    .brand-title p { margin: 0; font-size: 12px; color: var(--muted); }

    .actions { display: flex; align-items: center; gap: 10px; }
    .search { position: relative; }
    .search input { width: min(320px, 64vw); padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in oklab, var(--bg-soft) 92%, transparent); color: var(--text); outline: none; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
    .search input:focus { box-shadow: 0 0 0 6px var(--ring); border-color: var(--brand-2); }
    .search .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }

    .btn { padding: 8px 12px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-soft) 90%, transparent); border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.03); cursor: pointer; }
    .btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); }

    main { padding: 24px 0 16px; }

    /* Tabs */
    .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; margin-bottom: 18px; }
    .tab { border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; background: var(--bg-soft); cursor: pointer; font-size: 14px; transition: .2s; }
    .tab[aria-selected="true"] { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 8px 20px rgba(2,132,199,.25); }
    .tab:focus-visible { outline: none; box-shadow: 0 0 0 6px var(--ring); }

    /* Grid */
    .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
    @media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

    /* Card */
    .card { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.02); transition: transform .18s ease, box-shadow .18s ease; }
    .card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.12); }
    .card .icon { color: var(--brand); }
    .card h3 { margin: 2px 0 2px; font-size: 16px; }
    .card p { margin: 0; font-size: 14px; color: var(--muted); min-height: 38px; }
    .card .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
    .cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); }

    /* Badge */
    .badge { position: absolute; right: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
    .badge.new { background: var(--success-bg); color: var(--success-fg); }
    .badge.maintenance { background: var(--warn-bg); color: var(--warn-fg); }
    .badge.update { background: var(--info-bg); color: var(--info-fg); }

    /* Empty state */
    .empty { text-align: center; color: var(--muted); padding: 48px 0; }

    /* Footer */
    footer.site { border-top: 1px solid var(--line); margin-top: 28px; }
    .footer-inner { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 14px; color: var(--muted); }
    @media (min-width: 640px) { .footer-inner { flex-direction: row; } }
    .foot-links { display: flex; gap: 16px; }
    .foot-links a { color: var(--muted); }
    .foot-links a:hover { color: var(--text); }

    /* Utility */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }