@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#17231e; --muted:#6b756f; --paper:#f4f1e9; --panel:#fffdf8; --line:#dfe3da; --accent:#d95f35; --green:#1d5b45; --shadow:0 18px 55px rgba(33,48,38,.10); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 85% 0%, #d9e4d5 0, transparent 32%), var(--paper); font-family:'DM Sans', sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1180px; margin:0 auto; padding:58px 22px 54px; }
.tool-nav { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; justify-content:center; gap:4px; height:36px; padding:5px 12px; border-bottom:1px solid var(--line); background:rgba(255,253,248,.9); backdrop-filter:blur(12px); }
.tool-nav a { padding:4px 10px; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; border-radius:5px; }
.tool-nav a:hover,.tool-nav a[aria-current="page"] { color:var(--ink); background:#e7ede3; }
.shell-header { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:28px; }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3,h4 { font-family:'Space Grotesk', sans-serif; }
h1 { margin:0; font-size:clamp(2rem,5vw,4.5rem); letter-spacing:-.06em; line-height:.95; }
h2 { margin:0; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.05em; }
.tool-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:28px; }
.tool-card { position:relative; min-height:220px; display:flex; flex-direction:column; padding:23px; border:1px solid var(--line); border-radius:18px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; overflow:hidden; }
.tool-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(33,48,38,.16); }
.tool-card-search { background:#dce9da; }.tool-card-qr { background:#f5d8bd; }.tool-card-pdf { background:#d9e1ed; }.tool-card-badge { background:#ead9ed; }.tool-card-ftir { background:#d8e5e4; }
.card-index { font-size:12px; font-weight:700; letter-spacing:.12em; opacity:.6; }
.card-title { margin-top:auto; font-family:'Space Grotesk',sans-serif; font-size:1.65rem; font-weight:700; letter-spacing:-.04em; }
.card-description { max-width:230px; margin-top:10px; color:rgba(23,35,30,.68); font-size:.9rem; line-height:1.4; }
.card-arrow { position:absolute; top:20px; right:22px; font-size:1.5rem; }
.tool-panel { border:1px solid var(--line); border-radius:22px; padding:26px; background:rgba(255,253,248,.84); box-shadow:var(--shadow); }
.panel-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.panel-note { max-width:260px; margin:0; color:var(--muted); text-align:right; }
.search-form { display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.country-switcher { display:flex; gap:4px; padding:4px; background:#f0f2ec; border-radius:10px; }
.country-option { border:0; border-radius:7px; padding:9px 12px; color:var(--muted); background:transparent; font-weight:700; }
.country-option.is-active { color:#fff; background:var(--ink); }
#query { flex:1; min-width:0; border:0; outline:0; padding:12px; color:var(--ink); background:transparent; }
.primary-btn { border:0; border-radius:10px; padding:12px 22px; color:#fff; background:var(--accent); font-weight:700; }
.results { margin-top:24px; }
.hidden { display:none !important; }
.results-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.results-heading h3 { margin:0; font-size:1.35rem; }
#results-meta { color:var(--muted); }
.status-message { min-height:1.4em; color:var(--muted); }
.status-message.error { color:#a33b2a; }.status-message.success { color:var(--green); }
.results-list { display:grid; gap:10px; }.result-card,.empty-result { padding:17px; border:1px solid var(--line); border-radius:13px; background:#fff; }.result-card h4 { margin:0 0 12px; font-size:1.05rem; }.chips { display:flex; flex-wrap:wrap; gap:7px; }.chip { padding:6px 9px; border-radius:999px; color:var(--muted); background:#f0f2ec; font-size:.78rem; }
.recent-searches.hidden { display: none; }
.recent-searches-label { margin: 0 0 8px; font-size: 0.85rem; opacity: 0.7; }
.recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-item {
  border: 1px solid var(--border, #ddd);
  background: transparent;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.recent-item:hover { background: var(--hover, #f3f3f3); }
@media (max-width:980px) { .tool-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:780px) { .shell { padding:58px 12px 35px; }.shell-header,.panel-heading { align-items:flex-start; flex-direction:column; }.tool-grid { grid-template-columns:1fr; }.tool-card { min-height:175px; }.panel-note { text-align:left; }.search-form { flex-wrap:wrap; }.country-switcher { width:100%; justify-content:center; } #query { flex-basis:calc(100% - 10px); }.primary-btn { width:100%; } }
