.custom-search-recommend-wrapper {
    background-color: #01041a; 
    width: 100%;
  }
  .csr-inner-container {
    padding: 20px 16px 30px;
    width: 100%;
  }

  
  .csr-history-block {
    margin-top: 28px;
    display: block; 
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 20px;
  }
  .csr-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .csr-history-title {
    font-size: 14px;
    font-weight: 700;
    color: #d0d4ff;
  }
  .csr-history-clear {
    font-size: 12px;
    color: #4a90e2;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .csr-history-clear:hover {
    color: #6aabf5;
  }
  .csr-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .csr-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background-color 0.15s;
    border-radius: 4px;
  }
  .csr-history-item:hover {
    background-color: rgba(255,255,255,0.06);
  }
  .csr-history-item:last-child {
    border-bottom: none;
  }
  .csr-history-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.35);
  }
  .csr-history-icon svg {
    width: 16px;
    height: 16px;
  }
  .csr-history-text {
    font-size: 14px;
    color: #d0d4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  
  .csr-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #d0d4ff;
  }
  .csr-hottest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 24px;
  }
  .csr-hottest-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16/9;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
  }
  .csr-hottest-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
    transition: background 0.3s;
  }
  .csr-hottest-item:hover::before {
    background: rgba(0,0,0,0.2);
  }
  .csr-hottest-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .csr-hottest-text {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
  }

  
  .csr-fandom-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    padding-bottom: 4px;
  }
  .csr-fandom-grid::-webkit-scrollbar {
    display: block; 
  }
  .csr-fandom-item {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .csr-fandom-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }
  .csr-fandom-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #f5f5f5;
    overflow: hidden;
  }
  .csr-fandom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .csr-fandom-info {
    padding: 8px;
    color: #000;
  }
  .csr-fandom-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .csr-fandom-sub {
    font-size: 11px;
    color: #666;
    margin: 0;
  }

  
  @media (min-width: 960px) {
    .csr-inner-container {
      max-width: 760px;
      margin: 0 auto;
      padding: 24px 0 40px;
    }
    .custom-search-recommend-wrapper {
      padding: 0;
    }
    .header__search-modal-form {
      max-width: 760px !important;
      margin: 0 auto;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .csr-hottest-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .csr-fandom-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      overflow: visible;
      scroll-snap-type: none;
    }
    .csr-fandom-item {
      min-width: unset;
      max-width: unset;
      flex-shrink: unset;
      scroll-snap-align: unset;
    }
  }

  
  [data-search-active="true"] .custom-search-recommend-wrapper {
    display: none !important;
  }

.ap-search-is-open{overflow:hidden!important}
.ap-search-overlay{position:fixed;inset:0;z-index:2147483000;background:#01041a;color:#d0d4ff;overflow:auto;overscroll-behavior:contain;font-family:Poppins,sans-serif;line-height:1.5;text-align:left;isolation:isolate}
.ap-search-overlay [hidden],.ap-search-overlay[hidden]{display:none!important}
.ap-search-overlay *{box-sizing:border-box}
.ap-search-overlay::after{content:'';display:block;height:120px;height:calc(120px + env(safe-area-inset-bottom,0px))}
.ap-search-topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:center;padding:18px 24px;background:#01041a;border-bottom:1px solid rgba(255,255,255,.06)}
.ap-search-topbar-inner{display:flex;align-items:center;width:100%;max-width:760px;gap:16px}
.ap-overlay-search-form{position:relative;flex:1;min-width:0;margin:0}
.ap-search-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:rgba(255,255,255,.4);pointer-events:none}
.ap-search-input-icon svg{display:block;width:18px;height:18px}
.ap-search-overlay #ap-overlay-query{display:block;width:100%;height:auto;min-height:0;margin:0;padding:12px 16px 12px 44px;color:#fff!important;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;outline:none;box-shadow:none;font:inherit;font-size:16px;line-height:1.5;caret-color:#fff}
.ap-search-overlay #ap-overlay-query:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.ap-search-overlay #ap-overlay-query::placeholder{color:rgba(255,255,255,.35);opacity:1}
.ap-search-overlay button{font-family:inherit;line-height:1.5;text-transform:none;letter-spacing:normal;box-shadow:none}
.ap-search-overlay .ap-search-cancel{padding:8px 4px;white-space:nowrap;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#d0d4ff;background:none;border:0;border-radius:0}
.ap-search-overlay .csr-fandom-title{color:#000;line-height:1.5}
.ap-search-overlay .csr-history-clear{border:0;background:none;padding:0;font-size:12px;font-weight:600;letter-spacing:.3px;color:#4a90e2}
.ap-search-overlay .csr-history-item{width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.04);background:none;color:#d0d4ff}
.csr-history-icon svg{width:16px;height:16px;display:block}
.ap-search-suggestions{min-height:60vh}
.ap-search-suggestions-inner{max-width:760px;margin:0 auto;padding:20px 16px 30px}
.ap-search-suggestions-title{font-size:14px;font-weight:700;margin-bottom:8px}
.ap-search-overlay .ap-search-suggestion{display:flex;align-items:center;gap:12px;padding:11px 4px;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.04);border-radius:4px;background:none;text-align:left;color:#d0d4ff}
.ap-search-suggestion:hover{background:rgba(255,255,255,.06)!important}
.ap-search-suggestion svg{display:block;width:16px;height:16px;color:rgba(255,255,255,.35)}
.ap-search-suggestion-text{font-size:14px;font-weight:700}
.ap-search-suggestion-text b{font-weight:400;color:#fff}
.ap-search-overlay .ap-see-results{display:block;margin:20px auto 0;padding:10px 28px;border:0;border-radius:4px;background:#9eea32;color:#000;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.ap-search-overlay .ap-see-results:hover{background:#8cd42a}
.ap-search-overlay a:focus-visible,.ap-search-overlay button:focus-visible{outline:2px solid #9eea32;outline-offset:3px}
@media(min-width:960px){.ap-search-topbar{padding:20px 40px}.ap-search-suggestions-inner{padding:24px 0 40px}}
.ap-search-overlay{font-size:14px;line-height:1.3}.ap-search-overlay #ap-overlay-query{line-height:normal}.ap-search-overlay .csr-fandom-title{line-height:1.3}.ap-search-overlay button{line-height:1.3}

/* OTA source theme search: a compact white hot-search panel anchored to the
   header search control, over a dimmed page. */
.ap-search-overlay{
  position:fixed!important;
  inset:0!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  color:#202020!important;
  font:14px/1.4 Arial,Helvetica,sans-serif!important;
}
.ap-search-overlay[hidden]{display:none!important}
.ap-search-overlay::after{display:none!important}
.ap-search-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)}
.ap-search-panel{
  position:absolute;
  z-index:2;
  top:var(--ap-search-top,52px);
  left:var(--ap-search-left,calc(50% - 260px));
  width:min(520px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:16px;
  border-radius:6px;
  background:#fff;
  color:#202020;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.ap-search-topbar-inner{display:flex;align-items:center;width:100%;max-width:none;gap:0}
.ap-search-overlay .ap-search-cancel{display:none}
.ap-overlay-search-form{
  position:relative;
  display:flex;
  flex:1;
  align-items:center;
  height:36px;
  min-width:0;
  margin:0;
  border:1px solid #e6e6e6;
  border-radius:4px;
  background:#fff;
}
.ap-overlay-search-form:focus-within{border-color:#292929}
.ap-search-input-icon{left:12px;width:14px;height:14px;color:#707070}
.ap-search-input-icon svg{width:14px;height:14px}
.ap-search-overlay #ap-overlay-query{
  flex:1;
  width:0;
  height:34px;
  min-height:0;
  margin:0;
  padding:0 10px 0 32px;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent!important;
  color:#202020!important;
  font:14px/1.2 Arial,Helvetica,sans-serif!important;
  box-shadow:none!important;
  caret-color:#202020;
}
.ap-search-overlay #ap-overlay-query::placeholder{color:rgba(32,32,32,.42);opacity:1}
.ap-overlay-search-form input[type="hidden"]{display:none!important}
.ap-search-overlay .ap-search-submit{
  flex:0 0 auto;
  align-self:stretch;
  min-width:73px;
  height:36px;
  margin:-1px;
  padding:0 12px;
  border:0;
  border-radius:0 4px 4px 0;
  background:#202020;
  color:#fff;
  font:600 14px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.custom-search-recommend-wrapper{display:block!important;margin:22px 0 0;padding:0!important;background:transparent!important}
.ap-hot-searches{
  padding:13px 8px 19px;
  border-radius:6px;
  background:linear-gradient(110deg,#fff1f1,#fff8f8);
}
.ap-hot-searches-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.ap-hot-searches-title{margin:0;color:#202020;font-size:16px;font-weight:600;line-height:1.3}
.ap-search-overlay .ap-hot-search-refresh{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:3px;border:0;background:transparent;color:#777;cursor:pointer}
.ap-hot-search-refresh svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ap-hot-searches-list{display:flex;flex-wrap:wrap;gap:12px 8px}
.ap-search-overlay .ap-hot-search-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  min-height:28px;
  padding:4px 9px;
  border:0;
  border-radius:100px;
  background:#fff;
  color:rgba(32,32,32,.68);
  font:14px/1.2 Arial,Helvetica,sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.ap-search-overlay .ap-hot-search-item:hover{background:#f2eaea;color:#202020}
.ap-search-overlay .ap-hot-search-item span{font-size:14px;line-height:1}
.ap-search-overlay .csr-history-block{margin-top:16px;padding:12px;border-radius:6px;background:#fff5f5;color:#202020}
.ap-search-overlay .csr-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ap-search-overlay .csr-history-title{font-size:16px;font-weight:600}
.ap-search-overlay .csr-history-clear{border:0;background:none;color:#666}
.ap-search-overlay .csr-history-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 0;border:0;border-bottom:1px solid #eee;background:none;color:#555;text-align:left;cursor:pointer}
.ap-search-suggestions{min-height:0!important;margin-top:12px;padding:0!important;background:#fff!important}
.ap-search-suggestions-inner{max-width:none;margin:0;padding:0!important}
.ap-search-suggestions-title{margin:0 0 6px;color:rgba(32,32,32,.5);font-size:14px;font-weight:600}
.ap-search-overlay .ap-search-suggestion{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:0;border-bottom:1px solid #f2f2f2;border-radius:0;background:#fff;color:#444;text-align:left}
.ap-search-overlay .ap-search-suggestion:hover{background:#f6f6f6!important}
.ap-search-suggestion svg{color:#777}
.ap-search-suggestion-text{font-size:14px;font-weight:400}
.ap-search-suggestion-text b{color:#202020;font-weight:700}
.ap-search-overlay .ap-see-results{display:block;margin:12px auto 0;padding:9px 20px;border:0;border-radius:4px;background:#202020;color:#fff;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.ap-search-overlay .ap-see-results:hover{background:#444}
.ap-search-overlay a:focus-visible,.ap-search-overlay button:focus-visible{outline:2px solid #222;outline-offset:2px}
@media(max-width:959px){
  .ap-search-overlay{background:#fff!important;color:#202020!important;overflow:auto!important}
  .ap-search-backdrop{display:none}
  .ap-search-panel{position:relative;inset:auto;width:100%;max-width:none;max-height:none;min-height:100dvh;padding:16px;border-radius:0;box-shadow:none}
  .ap-search-topbar-inner{gap:8px}
  .ap-search-overlay .ap-search-cancel{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:36px;padding:0;border:0;background:none;color:#202020;font-size:30px;font-weight:400;line-height:1;cursor:pointer}
  .ap-search-overlay .ap-search-cancel span{transform:translateY(-2px)}
  .ap-search-overlay .ap-overlay-search-form{height:42px}
  .ap-search-overlay .ap-search-submit{height:42px}
  .ap-search-overlay #ap-overlay-query{height:40px}
  .custom-search-recommend-wrapper{margin-top:24px}
}