/* Olalim shared chrome: tokens, header, footer, cards. Namespaced (ol-) so it is safe next to Bootstrap. */
:root {
    --ol-bg: #ffffff;
    --ol-bg-soft: #f5f6f7;
    --ol-text: #111111;
    --ol-text-2: #5f6368;
    --ol-text-3: #888888;
    --ol-line: #e5e7eb;
    --ol-accent: #12a150;
    --ol-accent-hover: #0f8743;
    --ol-accent-soft: #e8f7ee;
    --ol-radius: 12px;
    --ol-max: 1200px;
    --ol-pad: 32px;
    --ol-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[hidden] { display: none !important; }

.ol-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ol-wrap { width: 100%; max-width: var(--ol-max); margin: 0 auto; padding: 0 var(--ol-pad); }

/* Header */
.ol-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--ol-line); font-family: var(--ol-font); }
.ol-header .ol-wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.ol-header-left { display: flex; align-items: center; gap: 40px; }
.ol-logo { font: 600 20px/1 var(--ol-font); letter-spacing: -.03em; color: var(--ol-text); text-decoration: none; }
.ol-logo:hover { color: var(--ol-text); opacity: .8; }
.ol-nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
.ol-nav a { color: var(--ol-text-2); padding: 4px 0; border-bottom: 2px solid transparent; text-decoration: none; transition: color .15s; }
.ol-nav a:hover { color: var(--ol-accent); }
.ol-nav a.active { color: var(--ol-accent); border-bottom-color: var(--ol-accent); }
.ol-search { display: flex; align-items: center; gap: 6px; padding: 0; font: 500 14px/1 var(--ol-font); color: var(--ol-text-2); background: none; border: 0; text-decoration: none; cursor: pointer; transition: color .15s; }
.ol-search:hover { color: var(--ol-accent); }

/* Footer */
.ol-footer { background: var(--ol-bg-soft); border-top: 1px solid var(--ol-line); font-family: var(--ol-font); }
.ol-footer .ol-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 40px; padding-bottom: 40px; }
.ol-footer-brand { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ol-text-2); }
.ol-footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; font-weight: 500; }
.ol-footer-links a { color: var(--ol-text-2); text-decoration: none; }
.ol-footer-links a:hover { color: var(--ol-accent); }

/* Cards and category tiles */
.ol-card { display: flex; flex-direction: column; padding: 20px; background: #fff; border: 1px solid var(--ol-line); border-radius: var(--ol-radius); color: var(--ol-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ol-card:hover { color: var(--ol-text); border-color: rgba(18, 161, 80, .45); box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04); }
.ol-card:hover h3 { color: var(--ol-accent); }
.ol-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font: 600 16px/1.4 var(--ol-font); letter-spacing: -.01em; transition: color .15s; }
.ol-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ol-text-2); }
.ol-tile { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: var(--ol-radius); color: var(--ol-text); background: var(--ol-bg-soft); }
.ol-tile[data-c="dev"] { background: #e8f7ee; }
.ol-tile[data-c="internet"] { background: #e8f2fc; }
.ol-tile[data-c="calculator"] { background: #fdf8e2; }
.ol-tile[data-c="graphic"] { background: #fcebee; }
.ol-tile[data-c="security"] { background: #fdf0e6; }
.ol-tile[data-c="text"] { background: #e6f5f5; }
.ol-tile[data-c="utility"] { background: #f1f2e6; }
.ol-tile[data-c="game"] { background: #fdf8e2; }
.ol-badge { padding: 1px 8px; font-size: 12px; font-weight: 500; color: var(--ol-accent); background: var(--ol-accent-soft); border-radius: 999px; }

@media (max-width: 768px) {
    :root { --ol-pad: 16px; }
    .ol-nav { display: none; }
    .ol-footer .ol-wrap, .ol-footer-brand { flex-direction: column; text-align: center; gap: 12px; }
    .ol-footer-links { justify-content: center; }
}