.salon-ctr-sidebar{
  --ctr-ink:#17201c;
  --ctr-muted:#66736d;
  --ctr-border:rgba(23,32,28,.1);
  --ctr-accent:#ff4f79;
  --ctr-cyan:#38c7b7;
  --ctr-spark:#d8ff3e;
  position:relative;
  display:block;
  padding:18px;
  border:1px solid var(--ctr-border);
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f8fbf7 100%);
  box-shadow:0 16px 40px rgba(23,32,28,.08);
  overflow:hidden;
}

.salon-ctr-sidebar::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--ctr-accent),var(--ctr-cyan),var(--ctr-spark));
}

.salon-ctr-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
  padding-bottom:11px;
  border-bottom:1px solid var(--ctr-border);
}

.salon-ctr-mark{
  width:8px;
  height:26px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--ctr-accent),var(--ctr-cyan));
  flex:0 0 auto;
}

.salon-ctr-head h3{
  margin:0;
  color:var(--ctr-ink);
  font-size:15px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:0;
}

.salon-ctr-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.salon-ctr-item{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:8px;
  border:1px solid rgba(23,32,28,.08);
  border-radius:12px;
  background:rgba(244,248,241,.76);
  color:inherit;
  text-decoration:none;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.salon-ctr-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,79,121,.48);
  background:#fff;
  box-shadow:0 12px 24px rgba(23,32,28,.08);
}

.salon-ctr-thumb{
  position:relative;
  display:block;
  width:82px;
  aspect-ratio:16/10;
  border-radius:10px;
  overflow:hidden;
  background:#101010;
}

.salon-ctr-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .24s ease,filter .24s ease;
}

.salon-ctr-item:hover .salon-ctr-thumb img{
  transform:scale(1.055);
  filter:saturate(1.06) contrast(1.04);
}

.salon-ctr-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:rgba(255,255,255,.72);
  font-size:22px;
  font-weight:900;
}

.salon-ctr-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.salon-ctr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:28px;
  min-height:20px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(56,199,183,.12);
  color:#087d72;
  font-size:11px;
  font-weight:850;
}

.salon-ctr-title{
  color:var(--ctr-ink);
  font-size:13.5px;
  font-weight:780;
  line-height:1.34;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .22s ease;
}

.salon-ctr-item:hover .salon-ctr-title{
  color:var(--ctr-accent);
}

.salon-ctr-empty{
  margin:0;
  color:var(--ctr-muted);
  font-size:13px;
  line-height:1.5;
}

.salon-ctr-dark{
  --ctr-ink:#f6f1e7;
  --ctr-muted:rgba(246,241,231,.62);
  --ctr-border:rgba(246,241,231,.12);
  background:linear-gradient(180deg,#111714 0%,#090d0b 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}

.salon-ctr-dark .salon-ctr-item{
  background:rgba(255,255,255,.045);
  border-color:rgba(246,241,231,.1);
}

.salon-ctr-dark .salon-ctr-item:hover{
  background:rgba(255,255,255,.075);
}

.salon-ctr-dark .salon-ctr-badge{
  background:rgba(255,79,121,.16);
  color:#ff8aaa;
}

.salon-ctr-minimal{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.salon-ctr-minimal::before{
  content:none;
}

.salon-ctr-minimal .salon-ctr-head{
  padding-bottom:10px;
}

.salon-ctr-minimal .salon-ctr-item{
  padding:0;
  border:0;
  background:transparent;
}

.salon-ctr-minimal .salon-ctr-item:hover{
  transform:none;
  box-shadow:none;
}

@media(max-width:480px){
  .salon-ctr-sidebar{padding:16px}
  .salon-ctr-item{grid-template-columns:76px minmax(0,1fr);gap:10px}
  .salon-ctr-thumb{width:76px}
}