/* MEA TOOLS — PRODUCT STYLES ============================ Lapisan styling khusus produk "tools". Semua warna WAJIB memakai var(--mea-...) dari token-color.css milik induk domain. Jangan pernah menulis kode hex di sini atau di file tool manapun. token-color.css di-link langsung dari meaecosystem.biz.id (lihat di index.html) — bukan disalin ke repo ini. */ * { box-sizing: border-box; } body { margin: 0; background: var(--mea-bg); color: var(--mea-text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.5; } .mea-container { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; } /* ---------- Header ---------- */ .mea-header { margin-bottom: 32px; } .mea-header h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; color: var(--mea-text-primary); } .mea-header p { font-size: 15px; color: var(--mea-text-secondary); margin: 0; } /* ---------- Search ---------- */ .mea-search { width: 100%; padding: 12px 14px; background: transparent; border: 1px solid var(--mea-border); border-radius: var(--mea-radius-md); color: var(--mea-text-primary); font-size: 14px; margin-bottom: 20px; transition: border-color 0.15s ease; } .mea-search::placeholder { color: var(--mea-text-muted); } .mea-search:focus { outline: none; border-color: var(--mea-accent); } /* ---------- Category filter (text-based, non-card) ---------- */ .mea-categories { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 32px; } .mea-category-btn { background: transparent; border: none; color: var(--mea-text-secondary); font-size: 13px; padding: 6px 10px; border-radius: var(--mea-radius-sm); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .mea-category-btn:hover { color: var(--mea-text-primary); } .mea-category-btn.active { color: var(--mea-accent-text); background: var(--mea-accent-muted); } /* ---------- Tool list (line-separated, no cards) ---------- */ .mea-tool-list { border-top: 1px solid var(--mea-border); } .mea-tool-item { display: block; padding: 18px 2px; border-bottom: 1px solid var(--mea-border); text-decoration: none; transition: opacity 0.15s ease; } .mea-tool-item:hover { opacity: 0.75; } .mea-tool-item h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--mea-text-primary); } .mea-tool-item p { font-size: 13.5px; color: var(--mea-text-secondary); margin: 0; } .mea-empty-state { padding: 32px 2px; color: var(--mea-text-muted); font-size: 14px; text-align: center; }