:root{
  --accent: #0b6fa4;
  --muted:  #6b7280;
  --bg:     #f5f7f8;
  --card:   #ffffff;
  --max-w:  1200px;
  --gap:    12px;
}

/* Reset and base */
* { box-sizing: border-box; }
.body { height: 100%; margin: 0; font-family: Inter, Arial, Helvetica, sans-serif; background: var(--bg); color: #111; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.header {
  background: #D1EAF0;
  border-bottom: 12px solid #eee;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 10px "Open Sans", calibri, sans-serif;
}
.header img { height: 22px; }
.site-title { margin: 0; font-size: 1rem; color: var(--accent); }

/* Page layout */
.container {
  max-width: var(--max-w);
  margin: 18px auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1000px) {
  .container { grid-template-columns: 1fr; padding: 10px; }
}

/* Results grid */
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 900px) {
  .results-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Card */
.card {
  background: var(--card);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #e6f0f4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.title { margin: 0; font-size: 1rem; color: var(--accent); line-height: 1.2; }
.url { font-size: 0.85rem; color: var(--muted); word-break: break-word; }
.excerpt { margin: 6px 0; color: #222; font-size: 0.95rem; }
.meta { font-size: 0.8rem; color: var(--muted); }

/* Media thumbnails */
.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.media-grid img,
.media-grid video {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
  display: block;
}

/* Aside */
.aside {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  max-height: 72vh;
  overflow: auto;
}
.search-box { display: flex; gap: 8px; margin-top: 8px; }
.search-box input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.search-box button { padding: 8px 10px; border-radius: 6px; background: var(--accent); color: #fff; border: none; cursor: pointer; }

/* Profiles */
.profiles-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px) { .profiles-grid { grid-template-columns: 1fr; } }
.profile-thumb { width: 110px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }

/* Social inputs (icons) */
.social-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.social-input {
  height:40px;
  padding:8px 40px 8px 12px;
  border:1px solid #ddd;
  border-radius:6px;
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:20px 20px;
  min-width:180px;
  font-size:14px;
}
.social-input:focus { outline:none; border-color: var(--accent); box-shadow: 0 6px 18px rgba(11,111,164,0.08); }

/* Add your icon files to static/glimseplatform/icons/ and reference them here */
.social--facebook   { background-image: url("https://cdn1.iconfinder.com/data/icons/social-media-2285/512/Colored_Facebook3_svg-128.png" ); }
.social--instagram  { background-image: url("https://cdn4.iconfinder.com/data/icons/logos-brands-7/512/instagram_icon-instagram_buttoninstegram-64.png" ); }
.social--tiktok     { background-image: url;("https://cdn0.iconfinder.com/data/icons/logos-brands-7/512/TikTok_logo_app0-64.png" ) }
.social--snapchat   { background-image: url("https://cdn4.iconfinder.com/data/icons/social-media-flat-7/64/Social-media_Snapchat-64.png" ); }
.social--youtube    { background-image: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Youtube_colored_svg-128.png" ); }
.social--reddit     { background-image: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Reddit3_colored_svg-64.png" ); }
.social--x          { background-image: url("https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-64.png" ); }
.social--linkedin   { background-image: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Linkedin_unofficial_colored_svg-128.png" ); }
.social--discord    { background-image: url("https://cdn3.iconfinder.com/data/icons/social-network-flat-3/100/Discord-64.png" ); }
.social--pinterest  { background-image: url("https://cdn3.iconfinder.com/data/icons/social-rounded-2/72/Pinterest-64.png" ); }
.social--whatsapp   { background-image: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Whatsapp2_colored_svg-128.png" ); }
.social--telegram   { background-image: url("https://cdn3.iconfinder.com/data/icons/social-media-chamfered-corner/154/telegram-64.png" ; }

.input {
    height:40px;
    width: 220px;
    background: url("https://cdn1.iconfinder.com/data/icons/social-media-2285/512/Colored_Facebook3_svg-128.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input1 {
    height:40px;
    width: 220px;
    background: url("https://cdn4.iconfinder.com/data/icons/logos-brands-7/512/instagram_icon-instagram_buttoninstegram-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input2 {
    height:40px;
    width: 220px;
    background: url("https://cdn0.iconfinder.com/data/icons/logos-brands-7/512/TikTok_logo_app0-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input3 {
    height:40px;
    width: 220px;
    background: url("https://cdn4.iconfinder.com/data/icons/social-media-flat-7/64/Social-media_Snapchat-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input4 {
    height:40px;
    width: 220px;
    background: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Youtube_colored_svg-128.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input5 {
    height:40px;
    width: 220px;
    background: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Reddit3_colored_svg-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input6 {
    height:40px;
    width: 220px;
    background: url("https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input7 {
    height:40px;
    width: 220px;
    background: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Linkedin_unofficial_colored_svg-128.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input8 {
    height:40px;
    width: 220px;
    background: url("https://cdn3.iconfinder.com/data/icons/social-network-flat-3/100/Discord-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input9 {
    height:40px;
    width: 220px;
    background: url("https://cdn3.iconfinder.com/data/icons/social-rounded-2/72/Pinterest-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input10 {
    height:40px;
    width: 220px;
    background: url("https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Whatsapp2_colored_svg-128.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}
.input11 {
    height:40px;
    width: 220px;
    background: url("https://cdn3.iconfinder.com/data/icons/social-media-chamfered-corner/154/telegram-64.png" ) no-repeat right;
    background-size: 13% 70%;
    border-radius: 5px
    
}


/* Preview cards */
.preview-card { background: #fff; border-radius: 8px; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.preview-card img { width: 100%; height: auto; border-radius: 6px; display:block; }

/* Utilities */
.small { font-size: 0.85rem; color: var(--muted); }
.center { text-align: center; }
