@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
.csi-wrap{
  display:flex;
  justify-content:flex-start;
  padding:34px 14px;
}
.csi-wrap,
.csi-wrap * {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* subtle bounce */
@keyframes csiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.csi-card{
  width:min(720px,100%);
  background:#fcfcfb; /* dirty white card */
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  padding:20px 20px 16px;
  box-shadow:
    0 22px 48px rgba(2,6,23,.12),
    0 2px 10px rgba(2,6,23,.05);
  animation:csiFloat 4.2s ease-in-out infinite;
  margin-left:0;
  margin-right:auto;
}

.csi-title{
  font-size:16px;
  font-weight:900;
  color:#0B1520;
  margin-bottom:14px;
  text-align:left;
  letter-spacing:-.02em;
}

.csi-label{
  display:block;
  color:rgba(11,21,32,.72);
  font-size:12px;
  margin:0 0 8px;
  text-align:left;
}

.csi-search-row{position:relative;}

.csi-input{
  width:100%;
  background:rgba(2,6,23,.03);
  border:1px solid rgba(2,6,23,.10);
  color:#0B1520;
  border-radius:14px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  text-align:left;
}

.csi-input:focus{
  border-color:rgba(0,34,85,.26);
  box-shadow:0 0 0 4px rgba(0,34,85,.10);
  background:#fff;
}

/* suggestions dropdown: white + premium */
.csi-suggestions{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 10px);
  background:#fff;
  border:1px solid rgba(2,6,23,.10);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(2,6,23,.14);
  z-index:20;
  display:none;
  max-height:340px;
  overflow:auto;
}

.csi-s-item{
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}

.csi-s-item:hover{background:rgba(0,34,85,.05);}

.csi-s-item img{
  width:40px;height:40px;
  border-radius:14px;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 10px 18px rgba(2,6,23,.10);
}

.csi-av-fallback{
  width:40px;height:40px;
  border-radius:14px;
  background:rgba(2,6,23,.08);
  flex:0 0 auto;
}

.csi-s-meta{min-width:0;}

.csi-s-name{
  color:#0B1520;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.csi-s-link{
  color:rgba(11,21,32,.62);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* selected row: centered, premium pill */
.csi-selected{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  background:rgba(2,6,23,.03);
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  padding:12px;
}

.csi-selected-name{
  color:#0B1520;
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:70%;
  text-align:left;
}

.csi-btn{
  background:#002255;
  border:0;
  color:#fff;
  font-weight:900;
  border-radius:14px;
  padding:10px 16px;
  cursor:pointer;
  box-shadow:0 12px 22px rgba(0,34,85,.18);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.csi-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,34,85,.22);
}

.csi-btn:active{transform:translateY(0);}

.csi-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}

.csi-status{
  margin-top:12px;
  font-size:13px;
  color:rgba(11,21,32,.78);
  text-align:left;
}

.csi-status.ok{color:#167c3c;}
.csi-status.err{color:#b42318;}

/* preview frame */
.csi-preview{
  margin-top:16px;
  background:rgba(2,6,23,.02);
  border:1px solid rgba(2,6,23,.08);
  border-radius:18px;
  padding:12px;
}

.csi-preview img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  box-shadow:0 18px 40px rgba(2,6,23,.14);
}

.csi-actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:12px;
  flex-wrap:wrap;
}

.csi-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#002255;
  color:#fff;
  font-weight:900;
  border-radius:14px;
  padding:10px 16px;
  text-decoration:none;
  box-shadow:0 12px 22px rgba(0,34,85,.18);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.csi-download:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,34,85,.22);
  opacity:.98;
}

.csi-download:active{transform:translateY(0);}

.csi-hint{
  color:rgba(11,21,32,.58);
  font-size:12px;
  text-align:left;
}

.csi-footer{
  margin-top:14px;
  color:rgba(11,21,32,.52);
  font-size:12px;
  text-align:left;
}

/* link button version */
.csi-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:left;
  background:#002255;
  color:#fff;
  font-weight:900;
  border-radius:14px;
  padding:10px 16px;
  text-decoration:none;
  box-shadow:0 12px 22px rgba(0,34,85,.18);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.csi-link-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,34,85,.22);
  opacity:.98;
}

.csi-link-btn:active{transform:translateY(0);}
button.csi-download{border:0;cursor:pointer}
.csi-link-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#0B1520;color:#E6EBF1;text-decoration:none;font-weight:800;letter-spacing:.1px;border:1px solid rgba(230,235,241,.14);box-shadow:0 14px 34px rgba(11,21,32,.18);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;line-height:1}.csi-link-btn i{font-size:16px;opacity:.95}.csi-link-btn span{font-size:14px;white-space:nowrap}.csi-link-btn:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(11,21,32,.22);filter:brightness(1.03)}.csi-link-btn:active{transform:translateY(0);box-shadow:0 12px 30px rgba(11,21,32,.18)}.csi-link-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(130,170,255,.26),0 14px 34px rgba(11,21,32,.18)}