:root{
  --max-width:760px;
  --accent:#ec5a3c;
  --accent-2:#f48f3c;
  --accent-3:#f9c449;
  --muted:#5f6676;
  --bg:#fdf2f2;
  --card:#fff8f4;
  --border:#f5d6c8;
  --shadow:rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  min-height:100vh;
  background:#fff8f2;
  color:#231f20;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:25px 12px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:padding 0.3s ease;
}

body.results-active{
  display:block;
  padding:30px 12px 40px;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:28px 28px 32px;
  background:var(--card);
  border-radius:22px;
  box-shadow:0 15px 45px var(--shadow);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  width:100%;
  transition:margin-top 0.3s ease;
}

body:not(.results-active) .container{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

body.results-active .container{
  margin-top:0;
  min-height:auto;
}

.container::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:none;
}

h1{
  margin:0 0 18px 0;
  font-size:1.9rem;
  letter-spacing:-0.02em;
  color:#331b16;
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-mark{
  font-size:1.6rem;
  line-height:1;
  display:inline-flex;
}

.tagline{
  margin:0 0 20px 36px;
  font-size:0.92rem;
  color:#7c4a37;
}

.search-form{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.search-form input{
  flex:1;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  font-size:1rem;
  background:white;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);
}

.search-form button{
  padding:12px 20px;
  border-radius:12px;
  border:0;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:white;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(236,90,60,0.4);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.search-form button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 20px rgba(236,90,60,0.35);
}

.input-note{
  margin:0 0 18px 0;
  font-size:0.75rem;
  color:#8a8f9c;
}

.ad-slot-top{
  min-height:64px;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:20px;
}

#ad-slot-top ins{
  flex:1;
  min-height:40px;
}

.adblock-banner{
  margin-top:12px;
  padding:10px 14px;
  border-radius:10px;
  background:#fff3d6;
  border:1px solid rgba(0,0,0,0.06);
  font-size:0.9rem;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.adblock-banner p{
  margin:0;
  flex:1;
  color:#6b4331;
}

.adblock-banner--hidden{
  display:none;
}

.adblock-dismiss{
  border:none;
  border-radius:999px;
  padding:4px 10px;
  font-size:0.8rem;
  cursor:pointer;
  background:#ff8b4a;
  color:white;
}

.ad-slot{
  width:100%;
  background:linear-gradient(120deg,#fff4ea,#fffbf5);
  border-radius:16px;
  border:1px dashed rgba(231,150,97,0.35);
  color:#6c717d;
  font-size:0.9rem;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  margin-bottom:14px;
}

.ad-native{
  min-height:56px;
}

.ad-slot p{
  margin:0;
  line-height:1.3;
}

.ad-label{
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#b25624;
  font-weight:600;
  background:rgba(255,255,255,0.65);
  border-radius:999px;
  padding:2px 7px;
  flex-shrink:0;
}

.ad-inline{
  margin:22px 0 18px;
  border:1px solid rgba(231,150,97,0.25);
  background:rgba(255,248,244,0.8);
  box-shadow:none;
  border-radius:999px;
  padding:8px 12px;
  gap:6px;
}

.ad-inline p{
  color:#6b4331;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.inline-ad{
  display:block;
  width:100%;
  margin:18px 0;
  padding:14px 16px;
  border-radius:16px;
  border:1px dashed rgba(0,0,0,0.08);
  background:#fff7f0;
  text-align:center;
  color:#6c5a4c;
  font-size:0.9rem;
}

.inline-ad-text{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.inline-ad .ad-text{
  font-size:0.85rem;
  color:#7a6b5c;
}

.inline-ad ins{
  display:block;
  width:100%;
  margin-top:10px;
}

.results{
  position:relative;
  border-radius:16px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  max-height:none;
  overflow:hidden;
  transition:opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease;
  margin-top:0;
}

.results.is-visible{
  padding:14px;
  min-height:120px;
  border:1px solid rgba(249,196,73,0.3);
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(6px);
  opacity:1;
  transform:none;
  pointer-events:auto;
  margin-top:16px;
}

.results:not(.is-visible){
  padding:0;
  border:0;
  min-height:0;
  background:transparent;
  max-height:0;
}

body.adblock-active:not(.adblock-revealed) .results-list{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}

.adblock-overlay{
  position:absolute;
  inset:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:18px;
  gap:14px;
  z-index:5;
}

.adblock-overlay p{
  margin:0;
  color:#5c3a2b;
  font-size:0.95rem;
}

.adblock-overlay-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.softwall-button{
  border:0;
  border-radius:999px;
  padding:8px 16px;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.softwall-button.reveal{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:white;
  box-shadow:0 8px 20px rgba(236,90,60,0.35);
}

.softwall-button.whitelisted{
  background:#ffe0c1;
  color:#7a3d1c;
  border:1px solid rgba(236,90,60,0.25);
}

.softwall-button:active{
  transform:translateY(1px);
}

body.adblock-active:not(.adblock-revealed) .results.is-visible .adblock-overlay{
  display:flex;
}

.results-heading{
  margin:0;
  font-size:1rem;
  color:#5c3a2b;
  font-weight:600;
}

.results-list{
  margin-top:12px;
}

.suggestions{
  display:none;
  margin-top:20px;
  padding:16px 18px;
  border-radius:16px;
  border:1px dashed rgba(236,90,60,0.25);
  background:rgba(255,255,255,0.75);
}

body.results-active .suggestions{
  display:block;
}

.suggestions-title{
  margin:0 0 10px 0;
  font-size:0.95rem;
  color:#6a3d2e;
  font-weight:600;
}

.suggestion-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.suggestion-tags span{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(236,90,60,0.1);
  color:#a14b2a;
  font-size:0.85rem;
}

.status-message{
  text-align:center;
}

.sub-item{
  margin-bottom:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(236,90,60,0.15);
  background:linear-gradient(135deg,#fff,#fff5f0);
  box-shadow:0 10px 20px rgba(50,18,7,0.04);
}

.sub-item h3{
  margin:0 0 6px 0;
  font-size:1.28rem;
  color:#2d1610;
  display:flex;
  align-items:center;
  gap:8px;
}

.tip{
  font-size:0.92rem;
  color:var(--muted);
}

.sub-item .tip{
  font-size:0.85rem;
  color:#7c818f;
  line-height:1.45;
}

.sub-index{
  font-size:0.85rem;
  color:#c3c9d6;
  font-weight:600;
}

.sub-name{
  font-weight:600;
  flex:1;
}

.sub-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-bottom:8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(236,90,60,0.09);
  color:#c2410c;
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600;
}

.empty-state{
  padding:20px;
  border-radius:16px;
  border:1px dashed rgba(92,58,43,0.2);
  background:rgba(255,255,255,0.6);
  text-align:center;
  color:#70584d;
}

.skeleton-card{
  margin-bottom:12px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(201,179,168,0.4);
  animation:pulse 1.2s ease-in-out infinite;
}

.skeleton-line{
  height:12px;
  margin:6px 0;
  border-radius:999px;
  background:linear-gradient(100deg,rgba(230,215,206,0.2),rgba(255,255,255,0.65),rgba(230,215,206,0.2));
  background-size:250% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  will-change:background-position;
}

.skeleton-title{
  width:60%;
}

.skeleton-body{
  width:90%;
}

@keyframes shimmer{
  0%{background-position:-150% 0;}
  100%{background-position:150% 0;}
}

@keyframes pulse{
  0%{opacity:0.9;}
  50%{opacity:1;}
  100%{opacity:0.9;}
}

.loading-placeholder{
  display:none;
  margin:0;
}

.loading-placeholder.is-active{
  display:block;
  margin:14px 0 0;
}

.footer-ad{
  display:none;
  max-width:var(--max-width);
  margin:24px auto 0;
  padding:14px 16px;
  border-radius:16px;
  border:1px dashed rgba(231,150,97,0.35);
  background:linear-gradient(120deg,#fff4ea,#fffaf6);
  color:#6c717d;
  text-align:center;
  font-size:0.9rem;
}

body.results-active .footer-ad{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* mobile sticky ad (visible only on narrow) */
.mobile-sticky-ad{
  display:none;
}

/* small responsive behavior */
@media (max-width:640px){
  body{
    padding:16px 12px 130px;
  }
  body.results-active{
    display:block;
    padding:16px 12px 120px;
  }
  body:not(.results-active) .container{
    min-height:auto;
    justify-content:flex-start;
  }
  .container{
    padding:18px 16px 22px;
    margin:0;
    border-radius:18px;
  }
  h1{
    font-size:1.6rem;
    line-height:1.2;
  }
  .tagline{
    margin:0 0 16px 0;
  }
  .search-form{
    flex-direction:column;
    gap:10px;
  }
  .search-form input,
  .search-form button{
    width:100%;
    min-height:48px;
  }
  .search-form button{
    margin-top:0;
  }
  .results-list{
    margin-top:8px;
  }
  .results-list .sub-item,
  .inline-ad{
    margin:14px 0;
    border-radius:14px;
  }
  .sub-item{
    padding:12px 14px;
  }
  .suggestions{
    margin-top:14px;
    padding:14px;
  }
  .suggestion-tags{
    gap:6px;
  }
  .suggestion-tags span{
    padding:6px 10px;
  }
  .skeleton-card{
    padding:12px 14px;
  }
  .mobile-sticky-ad{
    display:flex;
    position:fixed;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 32px);
    min-height:40px;
    max-height:48px;
    align-items:center;
    justify-content:center;
    background:linear-gradient(120deg,#fff,#fff5ef);
    border-radius:14px;
    box-shadow:0 12px 24px rgba(52,8,0,0.12);
    font-size:0.82rem;
    color:var(--muted);
    border:1px solid rgba(249,196,73,0.3);
    padding:8px 16px;
    gap:8px;
    z-index:20;
  }
  .mobile-sticky-ad ins{
    display:block;
    width:100%;
  }
}

@media (min-width:641px){
  .mobile-sticky-ad{display:none}
}