@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Anthropic Sans',-apple-system,sans-serif;background:#fff;}

.page{display:flex;flex-direction:column;align-items:center;padding:40px 1rem 3rem;}

.logo-wrap{margin-bottom:24px;display:flex;flex-direction:column;align-items:center;}
.wordmark{display:flex;align-items:baseline;}
.wordmark-trend{font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:700;color:#1A3A5C;letter-spacing:-0.02em;}
.wordmark-bricks{font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:700;color:#E87722;letter-spacing:-0.02em;}
.tagline{font-size:10px;color:#aaa;letter-spacing:0.18em;text-transform:uppercase;margin-top:4px;}

.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px;}
.cat-tab{padding:8px 20px;border-radius:20px;border:1px solid #ddd;background:#fff;font-size:13px;font-weight:500;color:#555;cursor:pointer;transition:all 0.15s;font-family:inherit;}
.cat-tab:hover{border-color:#1A3A5C;color:#1A3A5C;}
.cat-tab.active{background:#1A3A5C;border-color:#1A3A5C;color:#fff;}
.cat-tab.accent.active{background:#E87722;border-color:#E87722;color:#fff;}

/* ── YOUR EXACT WORKING STRUCTURE ── */
.search-group{display:flex;gap:10px;max-width:680px;width:100%;margin:0 auto;align-items:center;}

/* input-wrapper: position:relative — dropdown scoped here ONLY */
.input-wrapper{flex:1;position:relative;}

.search-input{
  width:100%;height:46px;
  padding:12px 20px;font-size:15px;
  border:1px solid #ddd;border-radius:28px;
  outline:none;background:#fff;color:#333;
  font-family:inherit;transition:box-shadow 0.2s;
}
.search-input:focus{box-shadow:0 1px 6px rgba(32,33,36,0.2);border-color:#1A3A5C;}
.search-input::placeholder{color:#aaa;}

/* Dropdown: absolute inside input-wrapper — button is a sibling */
.suggestions-list{
  position:absolute;
  top:100%;left:0;right:0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  margin-top:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  z-index:1000;
  max-height:300px;
  overflow-y:auto;
  display:none;
}
.suggestions-list.open{display:block;}
.dd-item{padding:10px 16px;font-size:14px;color:#333;cursor:pointer;display:flex;align-items:center;gap:10px;}
.dd-item:hover{background:#f5f5f5;}
.dd-type{font-size:10px;color:#aaa;margin-left:auto;text-transform:uppercase;letter-spacing:0.05em;}

/* Button: sibling to input-wrapper — outside dropdown stacking context */
.search-btn{
  background:#E87722;color:#fff;border:none;
  border-radius:28px;padding:0 28px;height:46px;
  font-size:15px;font-weight:500;cursor:pointer;
  white-space:nowrap;font-family:inherit;
  transition:background 0.2s;flex-shrink:0;
}
.search-btn:hover{background:#c9661a;}

/* Tags row — plain div, no positioning */
.selected-wrap{
  display:flex;flex-wrap:wrap;gap:6px;
  width:100%;max-width:680px;
  margin-top:10px;
}
.selected-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:#eef3f8;color:#1A3A5C;
  border-radius:20px;padding:4px 12px;
  font-size:13px;border:1px solid #c5d5e8;
}
.selected-tag button{
  background:none;border:none;color:#1A3A5C;
  cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:0.6;
}
.selected-tag button:hover{opacity:1;}

/* Child container — your exact style */
#child-container{
  margin-top:12px;padding:16px 20px;
  background:#fff;border:1px solid #ddd;
  border-radius:12px;display:none;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
  width:100%;max-width:680px;
}
#child-container.visible{display:block;}
.child-title{font-size:13px;font-weight:500;margin-bottom:12px;color:#555;}
.child-title span{color:#E87722;font-weight:600;}
.checkbox-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.checkbox-item{display:flex;align-items:center;font-size:14px;cursor:pointer;color:#333;}
.checkbox-item input{margin-right:8px;accent-color:#E87722;width:14px;height:14px;cursor:pointer;}

.url-preview{
  width:100%;max-width:680px;margin-top:12px;
  background:#f8f8f8;border:1px solid #eee;
  border-radius:8px;padding:10px 14px;
  font-size:12px;color:#666;font-family:monospace;
  word-break:break-all;display:none;
}
.url-preview.visible{display:block;}
.url-preview span{color:#1A3A5C;font-weight:600;}

.filters-row{display:flex;gap:10px;width:100%;max-width:680px;margin-top:12px;flex-wrap:wrap;}
.filter-select{
  flex:1;min-width:140px;height:42px;
  padding:0 14px;font-size:13px;
  border:1px solid #ddd;border-radius:22px;
  background:#fff;color:#333;
  font-family:inherit;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:32px;
  outline:none;
  transition:border-color 0.15s;
}
.filter-select:focus{border-color:#1A3A5C;}
.filter-select:disabled{background:#f9f9f9;color:#bbb;cursor:not-allowed;}