.desktop-scope .romain-card {
  width: 220px;
  height: 240px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  padding: 20px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.desktop-scope .romain-card:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 16px 36px rgba(13,16,37,.18); 
}

.desktop-scope .romain-card__tile { 
  display:flex; flex-direction:column; align-items:center; gap:10px;
  height:100%; width:100%; text-align:center;
}

.desktop-scope .romain-card__title--center { 
  font-weight:700; font-size:15px; color:#0b2545;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.desktop-scope .romain-card__meta--muted { 
  font-size:12px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.desktop-scope .romain-badges--center { 
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:auto;
}
.desktop-scope .romain-badge { 
  border:none; background:#eef2ff; color:#3730a3; font-weight:600; padding:2px 8px; border-radius:999px; font-size:11px;
}

.desktop-scope .cards-flex { 
  display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; justify-content:flex-start; margin-top:8px;
}
.desktop-scope .cards-flex .romain-card { flex: 0 0 200px; }

@media (max-width: 1280px) { 
  .desktop-scope .cards-flex .romain-card { flex: 0 0 180px; width:180px; height:200px; } 
}
@media (max-width: 980px) { 
  .desktop-scope .cards-flex .romain-card { flex: 0 0 160px; width:160px; height:180px; } 
}

.desktop-scope .romain-card__icon--img {
  width: 120px; height: 120px; border-radius: 24px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, rgba(109,40,217,.12), rgba(6,182,212,.15));
  box-shadow: inset 0 3px 4px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,0.08);
  overflow:hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.desktop-scope .romain-card__icon--img img {
  width: 120px; height: 120px; object-fit: contain; transition: transform .25s ease;
}
.desktop-scope .romain-card:hover .romain-card__icon--img img { transform: scale(1.08); }

.desktop-scope .romain-header{
  background: #167D86;
  padding: 10px 16px;
  overflow: visible;
}
.desktop-scope .romain-logo-wrap{ display:flex; justify-content:center; align-items:center; }
.desktop-scope .romain-logo{
  max-width: 100%; max-height: 40px; object-fit: contain; display:block; margin: 0 auto; transition: transform .25s ease;
}
.desktop-scope .romain-logo:hover { transform: scale(1.05); }

.desktop-scope .romain-header .x-box-inner > .x-container:last-child{
  justify-content: flex-end;
}


.desktop-scope .romain-header{
background: #167D86;
color:#fff; padding:12px 16px;
}
.desktop-scope .romain-brand{ display:flex; align-items:center; gap:8px; font-weight:600; }
.desktop-scope .romain-brand .title{ font-size:16px; }

.desktop-scope .romain-section-hdr{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.desktop-scope .romain-section-hdr h2{ margin:0; font-weight:700; }

.desktop-scope .romain-sep{
height:4px; width:100%; border-radius:999px;
background: linear-gradient(90deg,#22c1c3,#8a4fff,#22c1c3); opacity:.95; margin:24px 0;
}

.desktop-scope .romain-grid .x-view-item{ padding:0 !important; margin:8px; }

.desktop-scope .romain-card{
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
padding: 12px; background: #fff;
display: flex; flex-direction: column; gap: 8px;
}
.desktop-scope .x-nlg .romain-card{ background:#fff; }

.desktop-scope .romain-card__top{
display:flex; gap:12px; align-items:flex-start; justify-content: space-around;
}

.desktop-scope .romain-card__icon{
width:120px; height:120px; flex:0 0 120px;
display:flex; align-items:center; justify-content:center;
font-size:24px; border-radius:10px; /*background:black;*/
}

.desktop-scope .romain-card__info{ flex:0 0 auto; min-width:0; }
.desktop-scope .romain-card__title{
font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.desktop-scope .romain-card__meta{ opacity:.7; font-size:12px; margin-top:2px; }

.desktop-scope .romain-badges{
display:flex; gap:6px; flex-wrap:nowrap; overflow:hidden; white-space:nowrap;
text-overflow:ellipsis; margin-top:6px;
}
.desktop-scope .romain-badge{
display:inline-block; padding:2px 8px; border-radius:999px;
border:1px solid rgba(0,0,0,.08); font-size:11px; background:#f8fafc;
}

.desktop-scope .romain-open{
margin-top:10px; margin-left:auto; margin-right:auto; align-self:flex-start;
padding:8px 16px; background-color:#0479df; border:1px solid #0479df;
border-radius:20px; color:#fff; cursor:pointer;
}

.desktop-scope .romain-empty{ opacity:.6; padding:24px; }
`, 'romain-desktop-css'