/* Can I See visual system v3: restrained entertainment UI with asset-led imagery. */
:root {
  --cis-v3-canvas: #e8eaf0;
  --cis-v3-page: #f4f5f8;
  --cis-v3-surface: #ffffff;
  --cis-v3-surface-alt: #f7f8fa;
  --cis-v3-ink: #242832;
  --cis-v3-muted: #68707e;
  --cis-v3-line: #d9dde5;
  --cis-v3-line-strong: #c7ccd6;
  --cis-v3-graphite: #1b1e26;
  --cis-v3-violet: #7d38bf;
  --cis-v3-violet-dark: #5f2798;
  --cis-v3-cyan: #42c8d4;
  --cis-v3-red: #c63d58;
  --cis-v3-green: #187d68;
  --cis-v3-shadow-1: 0 3px 10px rgba(24, 28, 37, .065);
  --cis-v3-shadow-2: 0 12px 28px rgba(24, 28, 37, .10);
}

html,
body {
  background: var(--cis-v3-canvas) !important;
  color: var(--cis-v3-ink);
}

.app {
  background: linear-gradient(180deg, #f8f9fb 0%, var(--cis-v3-page) 180px, #eff1f5 100%) !important;
  border-color: rgba(36, 40, 50, .08) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.58), 0 24px 64px rgba(24,28,37,.16) !important;
}

header {
  background: linear-gradient(180deg, #20232c 0%, #171a21 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 22px rgba(13,15,20,.18) !important;
}

.brand h1,
header h1 {
  color: #f8f8fa !important;
  font-weight: 790 !important;
}

.brand .sub,
header .sub {
  color: #adb3c0 !important;
}

main {
  background: transparent;
}

.mascot-welcome {
  margin-bottom: 14px;
}

.mascot-welcome .intro-panel p {
  max-width: 760px;
  color: #646b78 !important;
  font-size: 12px;
  line-height: 1.6;
}

.flow-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #303541 !important;
  border-radius: 8px !important;
  background: #1d2028 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065), var(--cis-v3-shadow-2) !important;
}

.flow-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cis-v3-violet), var(--cis-v3-cyan));
}

.flow-panel .flow-top h2 {
  color: #f7f7fa !important;
  font-weight: 760 !important;
}

.flow-panel .flow-top p {
  color: #aeb4c1 !important;
}

.flow-panel .crumb span {
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.065) !important;
  color: #d6d9e1 !important;
  box-shadow: none !important;
}

.section-title {
  min-height: 30px;
  margin-top: 22px !important;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(45,50,62,.10);
}

.section-title h2 {
  color: var(--cis-v3-ink) !important;
  font-size: 18px !important;
  font-weight: 790 !important;
}

.section-title h2::before {
  width: 2px !important;
  height: 17px !important;
  margin-right: 9px !important;
  background: var(--cis-v3-violet) !important;
}

.section-title > span,
.small-count {
  color: var(--cis-v3-violet-dark) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.card,
.event-card,
.panel,
.plan-card,
.rank-row,
.global-cafe-card,
.global-cafe-post-row,
.global-cafe-compact-post,
.global-cafe-title-post,
.global-cafe-notice,
.global-cafe-intro,
.global-cafe-menu-card,
.fan-badge-card,
.team-news-card,
.nearby-stage {
  border: 1px solid var(--cis-v3-line) !important;
  border-radius: 8px !important;
  background: var(--cis-v3-surface) !important;
  box-shadow: var(--cis-v3-shadow-1) !important;
}

.card,
.event-card {
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.card:hover,
.event-card:hover {
  border-color: var(--cis-v3-line-strong) !important;
  box-shadow: 0 7px 18px rgba(24,28,37,.085) !important;
}

.card:active,
.event-card:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(24,28,37,.07) !important;
}

.card h3,
.event-card h3,
.rank-row h3,
.panel h3 {
  color: var(--cis-v3-ink) !important;
  font-weight: 760 !important;
  text-shadow: none !important;
}

.meta,
.distance,
.action-label,
.panel p,
.plan-card p,
.rank-row p {
  color: var(--cis-v3-muted) !important;
}

.thumb {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  background-color: #20242d !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 88% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 12px rgba(18,21,28,.15) !important;
}

.thumb:not(.has-upload)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(255,255,255,.07), transparent 42%, rgba(125,56,191,.10));
}

/* Onboarding and locale selectors use the same quiet control language. */
.onboarding-card {
  border: 1px solid var(--cis-v3-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.22) !important;
}

.onboarding-card h2 {
  color: var(--cis-v3-ink) !important;
}

.onboarding-card p {
  color: var(--cis-v3-muted) !important;
}

.language-list {
  gap: 6px !important;
  scrollbar-color: rgba(86, 65, 148, 0.55) transparent !important;
}

.language-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.language-list::-webkit-scrollbar-thumb {
  background: rgba(86, 65, 148, 0.55) !important;
}

.language-btn,
.selector-btn,
.selector-option,
.country-btn,
.city-btn {
  min-height: 42px !important;
  border: 1px solid var(--cis-v3-line) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--cis-v3-ink) !important;
  box-shadow: none !important;
}

.language-btn:hover,
.selector-btn:hover,
.selector-option:hover,
.country-btn:hover,
.city-btn:hover {
  border-color: rgba(86, 65, 148, 0.42) !important;
  background: #f7f5fb !important;
}

.language-btn:focus-visible,
.selector-btn:focus-visible,
.selector-option:focus-visible,
.country-btn:focus-visible,
.city-btn:focus-visible {
  outline: 3px solid rgba(108, 83, 178, 0.18) !important;
  outline-offset: 1px;
}

.language-btn span,
.selector-btn span,
.selector-option span,
.country-btn span,
.city-btn span {
  color: var(--cis-v3-muted) !important;
}

.thumb.has-upload {
  background-color: #20242d !important;
  background-size: cover !important;
}

.thumb.has-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.detail-hero.thumb:not(.has-upload) {
  background-size: min(44%, 300px) !important;
}

.tag,
.tag.alt,
.tag.live,
.season-badge,
.translation-chip,
.fan-badge-chip,
.global-cafe-chip {
  min-height: 22px;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  padding: 3px 7px !important;
  background: #efeaf5 !important;
  color: #652c9c !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.25;
  box-shadow: none !important;
  text-shadow: none !important;
}

.tag.alt {
  background: #e8f2f3 !important;
  color: #176d75 !important;
}

.tag.live {
  background: #f9e8ec !important;
  color: #a6334c !important;
}

.distance {
  margin-left: auto;
  font-size: 10px !important;
  font-weight: 680 !important;
}

.promo-link,
.promo-link.detail,
.team-link-button,
.team-link-button.coral,
.team-link-button.lavender {
  border: 1px solid #d7c9e5 !important;
  border-radius: 6px !important;
  background: #f5f1f8 !important;
  color: #632a98 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.promo-link::after,
.team-link-button::after {
  content: "\2197";
  margin-left: 5px;
  font-size: 11px;
}

.ad-slot,
.ad-slot.admob-reserve {
  min-height: 64px !important;
  border: 1px dashed #cbd0d9 !important;
  border-radius: 8px !important;
  background: #eef0f4 !important;
  color: #7b818d !important;
  box-shadow: none !important;
}

.ad-slot.admob-reserve span {
  color: #7b818d !important;
}

input,
select,
textarea {
  border: 1px solid var(--cis-v3-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--cis-v3-ink) !important;
  box-shadow: inset 0 1px 2px rgba(24,28,37,.035) !important;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--cis-v3-line-strong) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #9472b3 !important;
  outline: 2px solid rgba(66,200,212,.20) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

.sheet {
  background: rgba(14,16,21,.56) !important;
  backdrop-filter: blur(8px);
}

.sheet-panel {
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 12px 12px 0 0 !important;
  background: #f5f6f8 !important;
  box-shadow: 0 -18px 50px rgba(18,21,28,.24) !important;
}

.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: rgba(245,246,248,.96);
  border-bottom: 1px solid var(--cis-v3-line);
}

.sheet-head h2 {
  color: var(--cis-v3-ink) !important;
}

.sheet-head .close,
.modal-card .close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--cis-v3-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #555c68 !important;
  box-shadow: var(--cis-v3-shadow-1) !important;
}

#choices.choice-grid {
  gap: 7px !important;
}

#choices .choice {
  min-height: 58px;
  padding: 10px 12px !important;
  border-left: 3px solid transparent !important;
}

#choices .choice:hover,
#choices .choice:focus-visible {
  border-left-color: var(--cis-v3-violet) !important;
}

#choices .choice strong {
  color: var(--cis-v3-ink) !important;
  font-size: 14px;
  font-weight: 760;
}

#choices .choice span {
  color: var(--cis-v3-muted) !important;
  font-size: 11px;
}

.modal-card,
.sheet-panel,
.onboarding-card {
  color: var(--cis-v3-ink) !important;
}

.modal-card {
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(18,21,28,.26) !important;
}

.modal-card h2 {
  color: var(--cis-v3-ink) !important;
  font-size: 18px !important;
  font-weight: 790 !important;
}

.modal-card p {
  color: var(--cis-v3-muted) !important;
}

.rank-row {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  padding: 10px !important;
}

.rank-no {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  background: #292d37 !important;
  color: #f6f7fa !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.rank-row:nth-child(-n+3) .rank-no {
  background: var(--cis-v3-violet-dark) !important;
}

.nearby-stage {
  min-height: 52px;
  text-align: left;
}

.nearby-stage.active {
  border-color: #ac91c5 !important;
  background: #f2edf6 !important;
  box-shadow: inset 3px 0 0 var(--cis-v3-violet), var(--cis-v3-shadow-1) !important;
}

.nearby-stage .selected-badge {
  border-radius: 4px !important;
  background: #e8f2f3 !important;
  color: #176d75 !important;
}

.language-list,
.selector-list,
.rank-scroll {
  scrollbar-color: #9b86ad #e5e7ec !important;
}

.language-list::-webkit-scrollbar-track,
.selector-list::-webkit-scrollbar-track,
.rank-scroll::-webkit-scrollbar-track {
  background: #e5e7ec !important;
}

.language-list::-webkit-scrollbar-thumb,
.selector-list::-webkit-scrollbar-thumb,
.rank-scroll::-webkit-scrollbar-thumb {
  background: #9b86ad !important;
}

.plan-card,
.fan-badge-card,
.team-news-card {
  padding: 12px !important;
}

.translation-chip {
  background: #eef0f4 !important;
  color: #59606d !important;
}

.founder-badge {
  border: 1px solid #c8ad62 !important;
  border-radius: 7px !important;
  background: #26252b !important;
  color: #f2d98d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 12px rgba(24,24,28,.12) !important;
}

.founder-badge::before {
  background: #f2d98d !important;
  color: #29252a !important;
  box-shadow: none !important;
}

.fan-badge-chip,
.season-badge {
  background: #efeaf5 !important;
  color: #652c9c !important;
}

.cheer-pill {
  border: 1px solid #dce0e7 !important;
  border-radius: 7px !important;
  background: #f7f8fa !important;
  color: #505763 !important;
}

.global-cafe-member-badge b,
.member-badge-rookie b,
.member-badge-regular b,
.member-badge-core b,
.member-badge-legend b {
  background: #343944 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.member-badge-regular b { background: #375f86 !important; }
.member-badge-core b { background: #6e369f !important; }
.member-badge-legend b { background: #7d6227 !important; }

.policy-note,
.report-feedback,
.terms-check-row,
.address-box,
.translation-panel {
  border-color: var(--cis-v3-line) !important;
  border-radius: 7px !important;
  background: var(--cis-v3-surface-alt) !important;
  box-shadow: none !important;
}

@media (max-width: 430px) {
  .card {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .thumb {
    background-size: 92% !important;
  }
}

@media (min-width: 600px) {
  #home #eventList .card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  #home #eventList .thumb {
    background-size: 90% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .event-card,
  .choice,
  button {
    transition: none !important;
  }
}