.cs2kc{
  --bg:#fffaf3;
  --panel:#ffffff;
  --panel-2:#fff4e7;
  --line:#efdcc6;
  --line-strong:#e6c08e;
  --text:#1f2430;
  --muted:#6f7685;
  --accent:#e77a17;
  --accent-2:#ffb347;
  --accent-3:#fff0dc;
  --success:#35a36f;
  --shadow:0 18px 42px rgba(34,28,20,.10);
  position:relative;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,184,84,.22), transparent 26%),
    radial-gradient(circle at top left, rgba(255,132,31,.10), transparent 24%),
    linear-gradient(180deg,#fffdf9 0%, #fff6ec 100%);
  border:1px solid rgba(215,158,87,.18);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
  font-family:inherit;
}

.cs2kc *{box-sizing:border-box}

.cs2kc__hero{
  display:grid;
  grid-template-columns:1.45fr .8fr;
  gap:18px;
  align-items:stretch;
  margin-bottom:18px;
}

.cs2kc__hero-text,
.cs2kc__hero-stats,
.cs2kc__toolbar,
.cs2kc__summary,
.cs2kc__card,
.cs2kc__modal-sheet{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,239,.98));
  border:1px solid rgba(222,191,152,.55);
  box-shadow:0 12px 34px rgba(56,42,26,.06);
}

.cs2kc__hero-text,
.cs2kc__hero-stats{
  border-radius:22px;
  padding:22px;
}

.cs2kc__hero-text{
  position:relative;
  overflow:hidden;
}

.cs2kc__hero-text::after{
  content:"";
  position:absolute;
  inset:auto -70px -70px auto;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,185,88,.22), transparent 68%);
  pointer-events:none;
}

.cs2kc__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
  margin-bottom:10px;
}

.cs2kc__title{
  margin:0 0 8px;
  color:#1f2430;
  font-size:clamp(26px,4vw,40px);
  line-height:1.05;
}

.cs2kc__subtitle{
  margin:0;
  max-width:760px;
  font-size:15px;
  color:var(--muted);
}

.cs2kc__legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.cs2kc__legend-pill,
.cs2kc__badge,
.cs2kc__tag,
.cs2kc__meta-pill,
.cs2kc__quick-preset,
.cs2kc__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.cs2kc__legend-pill--premium,
.cs2kc__badge--premium{background:rgba(231,122,23,.12); color:#b95900; border:1px solid rgba(231,122,23,.22)}
.cs2kc__legend-pill--mid,
.cs2kc__badge--mid{background:rgba(53,163,111,.12); color:#23764f; border:1px solid rgba(53,163,111,.22)}
.cs2kc__legend-pill--budget,
.cs2kc__badge--budget{background:rgba(120,132,168,.10); color:#59627b; border:1px solid rgba(120,132,168,.20)}

.cs2kc__hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  background:linear-gradient(180deg,#fff9f0 0%,#fff3e4 100%);
}

.cs2kc__hero-stat{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(224,191,148,.55);
  border-radius:18px;
  padding:16px 12px;
  text-align:center;
}

.cs2kc__hero-stat strong{
  display:block;
  font-size:28px;
  line-height:1;
  color:#1f2430;
  margin-bottom:6px;
}

.cs2kc__hero-stat span{
  display:block;
  font-size:12px;
  color:var(--muted);
}

.cs2kc__toolbar{
  border-radius:22px;
  padding:16px;
  margin-bottom:14px;
}

.cs2kc__toolbar-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.cs2kc__search{display:block}
.cs2kc__search-input{
  width:100%;
  border:1px solid rgba(220,189,149,.8);
  background:#fffdfa;
  color:var(--text);
  border-radius:16px;
  padding:14px 16px;
  font-size:15px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.cs2kc__search-input::placeholder{color:#9b907f}
.cs2kc__search-input:focus{border-color:rgba(231,122,23,.7); box-shadow:0 0 0 4px rgba(231,122,23,.10)}

.cs2kc__filters{display:flex; flex-wrap:wrap; gap:8px}
.cs2kc__chip,
.cs2kc__quick-preset{
  border:1px solid rgba(220,189,149,.7);
  background:#fff9f2;
  color:#4e5564;
  cursor:pointer;
  transition:.18s ease;
}
.cs2kc__chip:hover,
.cs2kc__quick-preset:hover{transform:translateY(-1px); border-color:rgba(231,122,23,.45); color:#8f4a08}
.cs2kc__chip.is-active,
.cs2kc__quick-preset.is-active{background:rgba(231,122,23,.12); color:#9a4f08; border-color:rgba(231,122,23,.34)}

.cs2kc__selects{display:flex; flex-wrap:wrap; gap:12px}
.cs2kc__selects label{display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700}
.cs2kc__selects select{
  min-width:210px;
  border:1px solid rgba(220,189,149,.8);
  background:#fffdfa;
  color:var(--text);
  border-radius:14px;
  padding:11px 14px;
  font-size:14px;
  outline:none;
}

.cs2kc__summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-radius:18px;
  padding:14px 16px;
  margin-bottom:14px;
}

.cs2kc__summary-left{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cs2kc__count{font-size:15px}
.cs2kc__summary-note{font-size:13px; color:var(--muted)}
.cs2kc__summary-right{display:flex; flex-wrap:wrap; gap:8px}

.cs2kc__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.cs2kc__card{
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
.cs2kc__card:hover{transform:translateY(-4px); border-color:rgba(231,122,23,.38); box-shadow:0 16px 38px rgba(69,46,18,.12)}

.cs2kc__card-media{
  position:relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at top left, rgba(255,178,74,.24), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,121,31,.16), transparent 28%),
    linear-gradient(180deg,#3b3128 0%, #201811 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.cs2kc__card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 50%);
  pointer-events:none;
}

.cs2kc__card-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.40));
  transform:scale(1.02);
}

.cs2kc__card-badges{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  pointer-events:none;
}

.cs2kc__badge{
  backdrop-filter:blur(6px);
  background:rgba(255,250,244,.88);
  color:#2a303c;
  border:1px solid rgba(230,200,157,.48);
}

.cs2kc__card-body{padding:16px}
.cs2kc__card-title{
  margin:0 0 7px;
  font-size:20px;
  line-height:1.1;
  color:#1f2430;
}
.cs2kc__card-subtitle{
  margin:0 0 11px;
  color:var(--muted);
  font-size:13px;
  min-height:34px;
}

.cs2kc__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.cs2kc__meta-pill{
  background:#fff7ed;
  border:1px solid rgba(223,193,154,.7);
  color:#5a6270;
}

.cs2kc__tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px}
.cs2kc__tag{
  background:#fffdfa;
  color:#535c6c;
  border:1px solid rgba(223,193,154,.7);
}

.cs2kc__why{
  color:#343b49;
  font-size:13px;
  line-height:1.5;
  background:#fff8ef;
  border:1px solid rgba(223,193,154,.65);
  border-radius:16px;
  padding:12px;
}

.cs2kc__empty{
  margin-top:14px;
  border-radius:18px;
  padding:18px;
  background:#fff8ee;
  border:1px dashed rgba(223,193,154,.9);
  color:#1f2430;
}
.cs2kc__empty span{display:block; color:var(--muted); margin-top:4px}

.cs2kc__footer-note{
  margin-top:16px;
  color:#8a7f71;
  font-size:12px;
}

.cs2kc__modal{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(35,24,15,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.cs2kc__modal.is-open{display:flex}
.cs2kc__modal-sheet{
  width:min(1040px,100%);
  max-height:min(86vh,920px);
  overflow:auto;
  border-radius:24px;
  padding:18px;
}
.cs2kc__modal-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.cs2kc__modal-title-wrap h3{margin:0 0 6px; font-size:32px; line-height:1; color:#1f2430}
.cs2kc__modal-title-wrap p{margin:0; color:var(--muted)}
.cs2kc__modal-close{
  border:1px solid rgba(220,189,149,.8);
  background:#fff9f2;
  color:#2c3340;
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
}

.cs2kc__modal-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}

.cs2kc__modal-media{
  border-radius:22px;
  padding:22px;
  background:
    radial-gradient(circle at top left, rgba(255,178,74,.24), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,121,31,.16), transparent 28%),
    linear-gradient(180deg,#3b3128 0%, #201811 100%);
  border:1px solid rgba(255,255,255,.08);
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs2kc__modal-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.42));
}

.cs2kc__modal-info{display:grid; gap:14px}
.cs2kc__info-card{
  border-radius:20px;
  padding:16px;
  background:#fff8ef;
  border:1px solid rgba(223,193,154,.72);
}
.cs2kc__info-card h4{
  margin:0 0 10px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#b55b00;
}
.cs2kc__info-list{display:grid; gap:10px}
.cs2kc__info-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  align-items:start;
}
.cs2kc__info-row dt{color:#807566; font-weight:700; font-size:13px}
.cs2kc__info-row dd{margin:0; color:#1f2430; font-size:14px}
.cs2kc__finish-list,
.cs2kc__detail-tags{display:flex; flex-wrap:wrap; gap:8px}

@media (max-width: 1150px){
  .cs2kc__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 960px){
  .cs2kc__hero,
  .cs2kc__modal-grid{grid-template-columns:1fr}
  .cs2kc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs2kc__summary{flex-direction:column; align-items:flex-start}
}

@media (max-width: 640px){
  .cs2kc{padding:16px; border-radius:18px}
  .cs2kc__hero-stats{grid-template-columns:1fr}
  .cs2kc__grid{grid-template-columns:1fr}
  .cs2kc__selects{width:100%}
  .cs2kc__selects label,
  .cs2kc__selects select{width:100%}
  .cs2kc__modal{padding:10px}
  .cs2kc__modal-sheet{padding:14px; border-radius:18px}
  .cs2kc__modal-title-wrap h3{font-size:24px}
  .cs2kc__info-row{grid-template-columns:1fr}
}