/* ═══════════════════════════════════════════════════════════════════════════
   Crew Change — hub (/crew-changes), report (/crew-changes/{id}) and
   share form (/crew-change).

   Translated from Shore Pass Design/screens-cc-hk.jsx › CCHome · CCTopicScreen ·
   CCExperiences · CCShareForm, plus the stat strip and "Pick a topic" list from
   screens-detail.jsx › CrewChangeIndex.

   The header, section labels, stars, empty state and dashed share CTA reuse the
   dh- primitives in design.css that the sibling screens (hotels, agents) already
   use. Everything below is scoped under .scr-cc so it cannot reach any other
   screen — and so the few names that collide with home.css (.exp-star,
   .exp-step, .exp-progress__fill) are overridden here rather than there.
   ═══════════════════════════════════════════════════════════════════════════ */

.scr-cc { padding-bottom: 10px; }
.scr-cc a { text-decoration: none; }

/* ──────────────── Stat strip (CrewChangeIndex › Stat) ──────────────── */
.scr-cc .cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 16px 0; }
.scr-cc .cc-stat {
    padding: 10px 12px; border-radius: var(--sp-r-md);
    background: var(--sp-bg-2); border: 1px solid var(--sp-line-2);
}
.scr-cc .cc-stat__k {
    display: block; font-family: var(--sp-font-display);
    font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sp-slate-2);
}
.scr-cc .cc-stat__v {
    display: block; margin-top: 2px; font-family: var(--sp-font-display);
    font-size: 18px; font-weight: 600; color: var(--sp-ink); line-height: 1.1;
}

/* ──────────────── Search row ──────────────── */
.scr-cc .cc-search {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 16px 0; padding: 14px 16px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: 14px; box-shadow: var(--sp-shadow-1);
}
.scr-cc .cc-search:hover { border-color: var(--sp-red); }
.scr-cc .cc-search span { font-size: 15px; font-weight: 500; color: var(--sp-slate); }
.scr-cc .cc-search__ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--sp-slate); }

/* ──────────────── Share promo (dashed) ──────────────── */
.scr-cc .cc-promo {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 16px 16px 0; padding: 16px;
    background: var(--sp-surface); border: 1.5px dashed var(--sp-red); border-radius: var(--sp-r-lg);
}
.scr-cc .cc-promo__orb {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
    display: grid; place-items: center; background: var(--sp-red-soft); color: var(--sp-red);
}
.scr-cc .cc-promo__orbico { width: 22px; height: 22px; }
.scr-cc .cc-promo__body { flex: 1 1 180px; min-width: 0; }
.scr-cc .cc-promo__title {
    margin: 0; font-family: var(--sp-font-display); font-size: 16px; font-weight: 600;
    color: var(--sp-ink); line-height: 1.2;
}
.scr-cc .cc-promo__sub { margin: 4px 0 0; font-size: 11.5px; color: var(--sp-slate); line-height: 1.4; }
.scr-cc .cc-promo__btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 11px 14px; border-radius: 11px;
    background: var(--sp-red); color: #fff; font-size: 13px; font-weight: 700;
}
.scr-cc .cc-promo__btn:hover { background: var(--sp-red-deep); }
.scr-cc .cc-promo__btnico { width: 15px; height: 15px; }

/* ──────────────── Topic grid (6 tiles, 3 up) ──────────────── */
.scr-cc .cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.scr-cc .cc-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 8px 12px; text-align: center;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-1);
}
.scr-cc .cc-tile:hover { border-color: var(--sp-red); }
.scr-cc .cc-tile.is-on { border-color: var(--sp-red); background: var(--sp-red-tint); }
.scr-cc .cc-tile__orb {
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; background: var(--sp-red-soft); color: var(--sp-red);
}
.scr-cc .cc-tile__ico { width: 25px; height: 25px; }
.scr-cc .cc-tile__label {
    font-family: var(--sp-font-display); font-size: 14px; font-weight: 600;
    color: var(--sp-ink); line-height: 1.15;
}
.scr-cc .cc-tile__sub { font-size: 10.5px; color: var(--sp-slate); line-height: 1.3; white-space: pre-line; }
.scr-cc .cc-tile__foot {
    margin-top: auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sp-red);
}
.scr-cc .cc-tile__chev { width: 13px; height: 13px; }

/* ──────────────── Experience shelf ──────────────── */
.scr-cc .cc-shelf { margin-top: 18px; }
.scr-cc .cc-shelf__head { display: flex; align-items: baseline; gap: 10px; padding: 0 16px 12px; }
.scr-cc .cc-shelf__title {
    flex: 1; margin: 0; font-family: var(--sp-font-display);
    font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sp-ink);
}
.scr-cc .cc-shelf__count { flex: 0 0 auto; font-size: 11.5px; color: var(--sp-slate-2); font-weight: 600; }

.scr-cc .cc-filters { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; }
.scr-cc .cc-filter {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px; border-radius: 999px; white-space: nowrap;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    color: var(--sp-slate); font-size: 12.5px; font-weight: 700;
}
.scr-cc .cc-filter:hover { border-color: var(--sp-red); color: var(--sp-red); }
.scr-cc .cc-filter.is-on { background: var(--sp-red-soft); border-color: var(--sp-red); color: var(--sp-red); }
.scr-cc .cc-filter__ico { width: 13px; height: 13px; flex: 0 0 auto; }

.scr-cc .cc-scope {
    display: flex; align-items: center; gap: 8px;
    margin: 0 16px 12px; padding: 11px 14px;
    background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 12px;
}
.scr-cc .cc-scope__k { font-size: 12.5px; color: var(--sp-slate); }
.scr-cc .cc-scope__ico { width: 14px; height: 14px; flex: 0 0 auto; color: var(--sp-red); }
.scr-cc .cc-scope__v { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--sp-ink); }
.scr-cc .cc-scope__clear {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 600; color: var(--sp-slate);
}
.scr-cc .cc-scope__clear:hover { color: var(--sp-red); }
.scr-cc .cc-scope__clearico { width: 14px; height: 14px; flex: 0 0 auto; }

/* ──────────────── Experience rows (CCExperiences list) ──────────────── */
.scr-cc .cc-feed { border-top: 1px solid var(--sp-line); }
.scr-cc .cc-exp { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--sp-line); }
.scr-cc .cc-exp:hover { background: var(--sp-bg-2); }
.scr-cc .cc-exp__orb {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid var(--sp-red-soft); color: var(--sp-red);
}
.scr-cc .cc-exp__orbico { width: 25px; height: 25px; }
.scr-cc .cc-exp__body { flex: 1; min-width: 0; }
.scr-cc .cc-exp__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.scr-cc .cc-exp__who { font-size: 13px; font-weight: 700; color: var(--sp-ink); }
.scr-cc .cc-exp__when { font-size: 11.5px; color: var(--sp-slate-2); }
.scr-cc .cc-exp__where {
    margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; color: var(--sp-slate); white-space: nowrap;
}
.scr-cc .cc-exp__whereico { width: 12px; height: 12px; flex: 0 0 auto; color: var(--sp-red); }
.scr-cc .cc-exp__cat {
    display: block; margin-bottom: 3px; font-family: var(--sp-font-display);
    font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--sp-red);
}
.scr-cc .cc-exp__title { display: block; font-size: 15px; font-weight: 700; color: var(--sp-ink); line-height: 1.25; }
.scr-cc .cc-exp__text { display: block; margin-top: 5px; font-size: 13px; color: var(--sp-slate); line-height: 1.45; }
.scr-cc .cc-exp__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.scr-cc .cc-exp__shots {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: var(--sp-slate-2);
}
.scr-cc .cc-exp__shotsico { width: 13px; height: 13px; }

/* ──────────────── Crew Chat bar ──────────────── */
.scr-cc .cc-chat {
    display: flex; align-items: center; gap: 14px;
    margin: 18px 16px 0; padding: 16px 18px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-1);
}
.scr-cc .cc-chat:hover { border-color: var(--sp-red); }
.scr-cc .cc-chat__orb {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; background: var(--sp-red-soft); color: var(--sp-red);
}
.scr-cc .cc-chat__orbico { width: 22px; height: 22px; }
.scr-cc .cc-chat__body { flex: 1; min-width: 0; }
.scr-cc .cc-chat__title {
    display: block; font-family: var(--sp-font-display); font-size: 18px; font-weight: 600; color: var(--sp-ink);
}
.scr-cc .cc-chat__sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sp-slate); }
.scr-cc .cc-chat__chev { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sp-slate-2); }

/* ──────────────── Bottom share CTA (filled) ──────────────── */
.scr-cc .cc-cta {
    display: flex; align-items: center; gap: 16px;
    margin: 16px 16px 4px; padding: 14px 18px;
    background: var(--sp-red); border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-red);
}
.scr-cc .cc-cta:hover { background: var(--sp-red-deep); }
.scr-cc .cc-cta__orb {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    border: 2px solid rgba(255, 255, 255, .55); color: #fff;
}
.scr-cc .cc-cta__orbico { width: 20px; height: 20px; }
.scr-cc .cc-cta__body { flex: 1; min-width: 0; }
.scr-cc .cc-cta__title {
    display: block; font-family: var(--sp-font-display); font-size: 16px; font-weight: 600;
    letter-spacing: .02em; color: #fff;
}
.scr-cc .cc-cta__sub { display: block; margin-top: 1px; font-size: 12px; color: rgba(255, 255, 255, .85); }
.scr-cc .cc-cta__chev { flex: 0 0 auto; width: 22px; height: 22px; color: #fff; }

/* ──────────────── Empty-state extras (on top of .dh-empty) ──────────────── */
.scr-cc .cc-emptyacts {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; margin-top: 14px;
}
.scr-cc .cc-btnico { width: 16px; height: 16px; }
.scr-cc .cc-emptyalt { font-size: 12.5px; font-weight: 700; color: var(--sp-red); }
.scr-cc .cc-emptyalt:hover { text-decoration: underline; }

/* ═══════════════════════ REPORT DETAIL ═══════════════════════ */

/* Crew review card (CCTopicReviews) */
.scr-cc .cc-review {
    margin: 0 16px 16px; padding: 14px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: 14px; box-shadow: var(--sp-shadow-1);
}
.scr-cc .cc-review__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scr-cc .cc-review__top .dh-stars__s { width: 15px; height: 15px; }
.scr-cc .cc-review__who { font-size: 13px; font-weight: 700; color: var(--sp-ink); }
.scr-cc .cc-review__rank { font-size: 11.5px; color: var(--sp-slate-2); }
.scr-cc .cc-review__meta {
    display: flex; align-items: center; gap: 5px;
    margin: 7px 0 0; font-size: 12px; color: var(--sp-slate); line-height: 1.4;
}
.scr-cc .cc-review__metaico { width: 13px; height: 13px; flex: 0 0 auto; color: var(--sp-red); }
.scr-cc .cc-review__guide {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--sp-line-2);
    font-size: 13px; font-weight: 700; color: var(--sp-red);
}
.scr-cc .cc-review__guide span { flex: 1; min-width: 0; }
.scr-cc .cc-review__guideico { width: 15px; height: 15px; flex: 0 0 auto; }
.scr-cc .cc-review__guidechev { width: 15px; height: 15px; flex: 0 0 auto; }

/* Photo rail */
.scr-cc .cc-shots { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 16px; }
.scr-cc .cc-shot {
    flex: 0 0 auto; width: 116px; height: 116px; border-radius: 12px;
    overflow: hidden; background: var(--sp-line-2); display: block;
}
.scr-cc .cc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Section blocks (CCTopicSection) */
.scr-cc .cc-sec { margin: 0 16px 14px; }
/* A report with no photos opens straight on its first section — it still needs
   the 16px the header would otherwise get from the photo rail below it. */
.scr-cc .dh-dhead + .cc-sec,
.scr-cc .dh-dhead + .dh-empty { margin-top: 16px; }
.scr-cc .cc-sec__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.scr-cc .cc-sec__orb {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center; background: var(--sp-red-soft); color: var(--sp-red);
}
.scr-cc .cc-sec__orbico { width: 16px; height: 16px; }
.scr-cc .cc-sec__title {
    margin: 0; font-family: var(--sp-font-display); font-size: 15px; font-weight: 600; color: var(--sp-ink);
}
.scr-cc .cc-sec__list { border: 1px solid var(--sp-line); border-radius: 12px; overflow: hidden; }
.scr-cc .cc-sec__item {
    margin: 0; padding: 11px 14px; background: var(--sp-surface);
    font-size: 13.5px; color: var(--sp-ink-2); line-height: 1.5;
}
.scr-cc .cc-sec__item + .cc-sec__item { border-top: 1px solid var(--sp-line-2); }

/* .dh-share__orb sizes its own svg; this only pins the icon we hand it. */
.scr-cc .cc-shareico { width: 19px; height: 19px; }

/* ═══════════════════════ SHARE FORM ═══════════════════════ */

.scr-cc--form { background: var(--sp-surface); }

/* Brand bar */
.scr-cc .cc-formbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--sp-bg); border-bottom: 1px solid var(--sp-line);
}
/* The prototype closes this screen with an X on the right, not a back arrow. */
.scr-cc .cc-formbar__close {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; color: var(--sp-ink);
    background: var(--sp-surface); border: 1px solid var(--sp-line);
}
.scr-cc .cc-formbar__close:hover { border-color: var(--sp-red); color: var(--sp-red); }
.scr-cc .cc-formbar__closeico { width: 22px; height: 22px; }
.scr-cc .cc-formbar__kicker {
    flex: 1; min-width: 0; margin: 0; font-family: var(--sp-font-display);
    font-size: 15px; font-weight: 700; letter-spacing: .05em; color: var(--sp-ink);
}
.scr-cc .cc-formbar__kicker b { color: var(--sp-red); font-weight: 700; }

/* Hero */
.scr-cc .cc-hero { padding: 22px 20px 0; text-align: center; }
.scr-cc .cc-hero__title {
    margin: 0; font-family: var(--sp-font-display); font-size: 24px; font-weight: 700;
    color: var(--sp-ink); line-height: 1.1;
}
.scr-cc .cc-hero__sub { margin: 8px 0 0; font-size: 13.5px; color: var(--sp-slate); line-height: 1.45; }

/* Progress bar — .exp-progress__fill / .exp-step keep the JS in assets/js/app.js working. */
.scr-cc .cc-progress {
    position: relative; display: flex; align-items: flex-start; justify-content: space-between;
    margin: 20px 18px 6px;
}
.scr-cc .cc-progress::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 8px;
    height: 3px; border-radius: 3px; background: var(--sp-line);
}
.scr-cc .cc-progress__fill {
    position: absolute; left: 6%; top: 8px; height: 3px; border-radius: 3px;
    background: var(--sp-red); transition: width .3s ease;
}
.scr-cc .cc-progress__step {
    position: relative; z-index: 1; flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scr-cc .cc-progress__dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sp-surface); border: 3px solid var(--sp-line);
}
.scr-cc .cc-progress__step.is-on .cc-progress__dot { background: var(--sp-red); border-color: var(--sp-red); }
.scr-cc .cc-progress__pct { font-size: 10.5px; font-weight: 700; color: var(--sp-slate-2); }
.scr-cc .cc-progress__step.is-on .cc-progress__pct { color: var(--sp-red); }

.scr-cc .cc-flash { margin: 0 16px 12px; }
.scr-cc .cc-form { padding: 10px 16px 24px; }

/* Blocks */
.scr-cc .cc-block {
    margin-bottom: 12px; padding: 14px;
    background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg);
}
.scr-cc .cc-block--sec { box-shadow: var(--sp-shadow-1); }
.scr-cc .cc-block__head { display: flex; gap: 12px; }
.scr-cc .cc-block__orb {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sp-bg-2); border: 1px solid var(--sp-line); color: var(--sp-red);
}
.scr-cc .cc-block__orbico { width: 22px; height: 22px; }
.scr-cc .cc-block__titles { flex: 1; min-width: 0; padding-top: 1px; }
.scr-cc .cc-block__title {
    margin: 0; font-family: var(--sp-font-display); font-size: 17px; font-weight: 700;
    color: var(--sp-ink); line-height: 1.15;
}
.scr-cc .cc-block__title i { font-style: normal; color: var(--sp-red); }
.scr-cc .cc-block__desc { margin: 3px 0 0; font-size: 12px; color: var(--sp-slate); line-height: 1.35; }

/* Fields */
.scr-cc .cc-lab { display: block; font-size: 13.5px; font-weight: 700; color: var(--sp-ink); margin-bottom: 8px; }
.scr-cc .cc-lab--sp { margin-top: 16px; }
.scr-cc .cc-lab em { font-style: normal; color: var(--sp-red); }

.scr-cc .cc-input {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
}
.scr-cc .cc-input:focus-within { border-color: var(--sp-red); }
.scr-cc .cc-input__ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--sp-red); }
.scr-cc .cc-input__f {
    flex: 1; min-width: 0; width: 100%;
    border: none; background: none; outline: none; padding: 0;
    font-family: var(--sp-font-body); font-size: 14px; color: var(--sp-ink);
}
.scr-cc .cc-input__f::placeholder { color: var(--sp-slate); }
/* Keep the native select affordance — the box around it is ours, the arrow is the browser's. */
.scr-cc select.cc-input__f { cursor: pointer; }

.scr-cc .cc-area {
    display: block; margin-top: 10px; padding: 13px 14px; resize: vertical;
    border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-surface);
    line-height: 1.5; min-height: 76px;
}
.scr-cc .cc-area:focus { border-color: var(--sp-red); }

.scr-cc .cc-who { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 10px; }

/* Joining / Sign-off segment */
.scr-cc .cc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scr-cc .cc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.scr-cc .cc-seg label {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 12px; cursor: pointer;
    background: var(--sp-surface); border: 1.5px solid var(--sp-line);
    font-size: 13.5px; font-weight: 700; color: var(--sp-slate);
}
.scr-cc .cc-seg input:checked + label {
    background: var(--sp-red-soft); border-color: var(--sp-red); color: var(--sp-red);
}
.scr-cc .cc-seg__ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Rating */
.scr-cc .cc-rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.scr-cc .cc-rate__lab { font-size: 12.5px; font-weight: 700; color: var(--sp-ink); }
.scr-cc .cc-rate__lab i { font-style: normal; font-weight: 500; color: var(--sp-slate); }
.scr-cc .cc-rate__row { display: inline-flex; gap: 2px; }
/* home.css dims .exp-star with opacity:.45; here the state is carried by colour alone. */
.scr-cc .exp-star {
    padding: 1px; border: none; background: none; cursor: pointer; opacity: 1;
    display: grid; place-items: center; color: var(--sp-line);
}
.scr-cc .cc-rate__starico { width: 21px; height: 21px; }
.scr-cc .exp-star.is-on { color: var(--sp-amber); }

/* Photo + anonymous rows */
.scr-cc .cc-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 14px;
    border: 1px solid var(--sp-line); border-radius: 14px; background: var(--sp-surface);
}
.scr-cc .cc-row--switch { cursor: pointer; }
.scr-cc .cc-row__ico { width: 23px; height: 23px; flex: 0 0 auto; color: var(--sp-slate); }
.scr-cc .cc-row__body { flex: 1 1 140px; min-width: 0; }
.scr-cc .cc-row__title { display: block; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--sp-ink); }
.scr-cc .cc-row__title i { font-style: normal; font-weight: 500; color: var(--sp-slate); }
.scr-cc .cc-row__sub { display: block; margin: 2px 0 0; font-size: 11.5px; color: var(--sp-slate); }
.scr-cc .cc-row__btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 13px; border-radius: var(--sp-r-md); cursor: pointer;
    background: var(--sp-surface); border: 1.5px dashed var(--sp-line);
    font-size: 13px; font-weight: 600; color: var(--sp-slate);
}
.scr-cc .cc-row__btn:hover, .scr-cc .cc-row__btn.is-drag { border-color: var(--sp-red); color: var(--sp-red); }
.scr-cc .cc-row__btnico { width: 15px; height: 15px; }

/* app.js toggles [hidden] on the preview, so the display rule must not win over it. */
.scr-cc .cc-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.scr-cc .cc-preview[hidden] { display: none; }
.scr-cc .cc-preview figure {
    margin: 0; width: 92px; height: 92px; border-radius: 12px;
    overflow: hidden; background: var(--sp-line-2);
}
.scr-cc .cc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anonymous switch */
.scr-cc .cc-switch { flex: 0 0 auto; display: inline-grid; place-items: center; }
.scr-cc .cc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.scr-cc .cc-switch__track {
    position: relative; display: block; width: 48px; height: 27px; border-radius: 999px;
    background: var(--sp-line); transition: background .15s ease;
}
.scr-cc .cc-switch__knob {
    position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s ease;
}
.scr-cc .cc-switch input:checked + .cc-switch__track { background: var(--sp-red); }
.scr-cc .cc-switch input:checked + .cc-switch__track .cc-switch__knob { left: 24px; }

/* Submit */
.scr-cc .cc-submit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 18px; padding: 17px; cursor: pointer;
    border: none; border-radius: 14px; background: var(--sp-red); color: #fff;
    font-family: var(--sp-font-display); font-size: 17px; font-weight: 600; letter-spacing: .03em;
    box-shadow: var(--sp-shadow-red);
}
.scr-cc .cc-submit:hover { background: var(--sp-red-deep); }
.scr-cc .cc-submit__ico { width: 18px; height: 18px; }

/* ──────────────── Wider viewports ──────────────── */
@media (max-width: 380px) {
    .scr-cc .cc-grid { grid-template-columns: repeat(2, 1fr); }
    .scr-cc .cc-tile__sub { display: none; }
}
@media (min-width: 720px) {
    .scr-cc .cc-grid { grid-template-columns: repeat(6, 1fr); }
    .scr-cc .cc-hero { padding-top: 28px; }
}