/* Mesa County Business License (fictional) – modern county portal */
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; color: #1e293b; background: #f5f6fb; }
a { color: #3b4c9b; }
#hdr { background: linear-gradient(90deg, #3b4c9b, #5b3a7a); color: #fff; }
#hdr .in { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 14px; }
#hdr .name { font: 600 22px/26px "Segoe UI", sans-serif; }
#hdr .sub { font-size: 13px; opacity: .85; }
#hdr nav { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
#hdr nav a { color: #fff; text-decoration: none; opacity: .9; }
#hdr nav a:hover { opacity: 1; text-decoration: underline; }
.hero { background: #fff; border-bottom: 1px solid #e2e8f0; }
.hero .in { max-width: 1180px; margin: 0 auto; padding: 30px 24px 26px; }
.crumbs { font-size: 13px; color: #64748b; margin-bottom: 6px; }
h1 { font: 600 30px/38px "Segoe UI", sans-serif; margin: 0 0 6px; }
.lead { color: #475569; margin: 0 0 18px; max-width: 760px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { border: 1px solid #c7cef0; background: #fff; color: #3b4c9b; border-radius: 999px; padding: 6px 14px; font: 600 14px "Segoe UI"; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: #3b4c9b; color: #fff; border-color: #3b4c9b; }
form.search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.box { flex: 1 1 460px; display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #c7cef0; border-radius: 999px; padding: 6px 8px 6px 20px; box-shadow: 0 6px 18px rgba(59,76,155,.12); }
.box input { border: 0; outline: 0; font: 18px "Segoe UI"; flex: 1; min-width: 0; padding: 6px 0; }
.box button { border: 0; background: #3b4c9b; color: #fff; border-radius: 999px; padding: 9px 22px; font: 600 15px "Segoe UI"; cursor: pointer; }
select { font: 15px "Segoe UI"; padding: 9px 12px; border: 1px solid #c7cef0; border-radius: 10px; background: #fff; }
main { max-width: 1180px; margin: 0 auto; padding: 22px 24px 40px; }
.meta { color: #475569; margin: 4px 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 18px; box-shadow: 0 6px 18px rgba(15,23,42,.06); display: flex; flex-direction: column; gap: 6px; }
.card h2 { font: 700 19px/26px "Segoe UI"; margin: 0; }
.card h2 a { color: #0f172a; text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card .cat { color: #475569; font-size: 14px; }
.card .row { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.pill { border-radius: 999px; padding: 3px 14px; font: 700 14px/24px "Segoe UI"; }
.pill.Active { background: #d7f5e3; color: #0e6b39; }
.pill.Pending { background: #fff3cd; color: #8a5a00; }
.pill.Inactive { background: #ede9fe; color: #5b21b6; }
.small { font-size: 14px; color: #334155; }
.pager { display: flex; gap: 8px; margin-top: 20px; align-items: center; }
.pager a, .pager span { padding: 6px 12px; border-radius: 8px; border: 1px solid #c7cef0; background: #fff; text-decoration: none; font-size: 14px; }
.pager span.cur { background: #3b4c9b; color: #fff; border-color: #3b4c9b; }
.empty { background: #fff; border: 1px dashed #c7cef0; border-radius: 14px; padding: 26px; color: #475569; }
.detail { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 26px; box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.detail h2 { margin: 0 0 4px; font: 700 26px/32px "Segoe UI"; }
.dgrid { display: grid; grid-template-columns: 220px 1fr; margin-top: 18px; border-top: 1px solid #e2e8f0; }
.dgrid div { padding: 10px 6px; border-bottom: 1px solid #e2e8f0; }
.dgrid div:nth-child(odd) { color: #475569; font-weight: 600; }
.note { font-size: 13px; color: #64748b; margin-top: 18px; }
footer { background: #1e293b; color: #cbd5e1; font-size: 14px; }
footer .in { max-width: 1180px; margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a { color: #fff; }