:root{
  --blue:#002244;
  --bright:#1414d8;
  --light:#005daa;
  --bg:#f3f6fb;
  --text:#152033;
  --muted:#667085;
  --border:#d7deea;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.logo-header{background:white;padding:18px 16px;border-bottom:1px solid var(--border);text-align:center}
.logo-header img{width:100%;max-width:900px;height:auto;display:block;margin:0 auto}
.hero{background:linear-gradient(135deg,var(--blue),var(--light));color:white;padding:32px 18px;text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;opacity:.85;margin:0 0 8px}
h1{font-size:clamp(2.5rem,8vw,5rem);margin:0;letter-spacing:-.05em}
.subtitle{max-width:720px;margin:14px auto 24px;line-height:1.45;opacity:.94}
.search-row{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:10px}
#search{padding:16px;border:0;border-radius:14px;font-size:1rem}
#clear{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:white;border-radius:14px;padding:0 18px;font-weight:bold}
main{max-width:1120px;margin:0 auto;padding:22px 16px 40px}
.notice{background:#fff8e6;border:1px solid #f2d58b;color:#59420a;padding:14px 16px;border-radius:16px;margin-bottom:24px}
.section{margin:30px 0}
.section h2{color:var(--blue);font-size:1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.card{display:flex;flex-direction:column;min-height:175px;background:white;border:1px solid var(--border);border-radius:20px;padding:18px;text-decoration:none;color:inherit;box-shadow:0 4px 14px rgba(16,24,40,.08)}
.card:hover{transform:translateY(-3px);border-color:var(--light)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.icon{font-size:1.8rem}
.tag{font-size:.76rem;font-weight:bold;color:var(--blue);background:#eef4ff;border:1px solid #c7dbff;border-radius:999px;padding:5px 9px}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted);line-height:1.4}
.open{margin-top:auto;padding-top:18px;color:var(--light);font-weight:bold}
#empty{background:white;border:1px dashed var(--border);padding:20px;border-radius:16px;text-align:center;color:var(--muted)}
footer{text-align:center;color:var(--muted);padding:24px 16px 36px;font-size:.85rem}
@media(max-width:560px){
  .logo-header{padding:12px}
  .search-row{grid-template-columns:1fr}
  #clear{padding:14px}
}


/* App-style two box layout update */
.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.card {
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  justify-content: space-between !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

.card-top {
  margin-bottom: 8px !important;
}

.icon {
  font-size: 2rem !important;
}

.tag {
  font-size: 0.68rem !important;
  padding: 4px 7px !important;
}

.card h3 {
  font-size: 0.98rem !important;
  line-height: 1.15 !important;
  margin-bottom: 6px !important;
}

.card p {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.open {
  font-size: 0.78rem !important;
  padding-top: 8px !important;
}

@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  .grid {
    gap: 10px !important;
  }

  .card {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .card h3 {
    font-size: 0.9rem !important;
  }

  .card p {
    font-size: 0.72rem !important;
  }
}


/* Clean favorites update - preserves square two-box tile layout */
.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  justify-content: space-between !important;
  padding: 14px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.favorite-btn {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--blue) !important;
  font-size: 1.24rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 20 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.favorite-btn.active {
  background: #fff8e6 !important;
  border-color: #d9a441 !important;
  color: #b7791f !important;
}

.card-top {
  padding-right: 32px !important;
}

.favorites-help {
  color: var(--muted);
  margin: -4px 0 12px;
  font-size: 0.9rem;
}

.favorites-empty {
  background: white;
  border: 1px dashed var(--border);
  border-radius: 18px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.favorites-grid .card {
  border-top: 4px solid #d9a441 !important;
}

.favorites-grid .favorite-btn {
  display: none !important;
}

@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}