/* Kite's type, palette and controls, scoped to Rangle's secondary screens. */
.rangle-ui {
  --pink: #f94b81;
  --pink-dark: #ff6673;
  --teal: #24b9c1;
  --paper: #f3eee3;
  --cream: #0d1519;
  --ink: #f6f0e7;
  --muted: #aeb9bb;
  --card: #17252b;
  --line: #ffffff24;
  --shadow: none;
  background: radial-gradient(ellipse at 50% -10%, #263d47, #0d1519 48%);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color-scheme: dark;
}
.rangle-ui button, .rangle-ui input, .rangle-ui textarea { font-family: inherit; }
.rangle-ui :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.rangle-ui h1 { font: 42px/1.08 'Anton', sans-serif; letter-spacing: .01em; }
.rangle-ui h2, .rangle-ui h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rangle-ui h2 { font-size: 23px; }
.rangle-ui .muted, .rangle-ui .note { color: var(--muted); }
.rangle-ui .text-btn { color: var(--teal); font-size: 12px; font-weight: 600; }
.rangle-ui .primary, .rangle-ui .primary.pink, .rangle-ui .plan-go {
  min-height: 49px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(110deg, #ff6771, #f74480);
  color: #101519;
  box-shadow: none;
  font: 700 17px 'Barlow Condensed', sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rangle-ui button:disabled { cursor: wait; opacity: .5; }
.rangle-ui .close-btn, .rangle-ui .close-btn.dark, .rangle-ui .plan-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 11px;
  background: #ffffff12;
  color: var(--ink);
  font-size: 27px;
  box-shadow: none;
}
.rangle-ui .toolbar { background: transparent; }
.rangle-ui .ios-nav { background: #0d1519; color: var(--ink); }
.rangle-ui .ios-nav h1 { font: 28px 'Barlow Condensed', sans-serif; }
.rangle-ui .ios-nav-done { color: var(--teal); font-size: 13px; }
.rangle-ui .ios-nav-done.close-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #ffffff12; color: var(--ink); font: 27px/1 sans-serif; }
.rangle-eyebrow, .rangle-field-label {
  font: 700 14px 'Barlow Condensed', sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rangle-page-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.rangle-page-top .rangle-eyebrow { color: var(--muted); }
.rangle-mini-brand { font: 30px 'Kaushan Script', cursive; color: var(--pink); transform: rotate(-7deg); }
.rangle-page-title { margin: 13px 0 9px; }
.rangle-page-lead { color: var(--muted); margin: 0 0 23px; font-size: 13px; }
.rangle-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rangle-count { display: inline-block; vertical-align: middle; padding: 2px 7px; border-radius: 20px; background: #ffffff14; font: 600 12px 'Barlow Condensed', sans-serif; }
.rangle-notice { padding: 11px 13px; background: #24b9c112; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; }
.rangle-form-help { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 9px 0 0; }

/* Welcome and account setup. */
.rangle-ui.rangle-intro { background: radial-gradient(circle at 20% 0, #244754, #0d1519 48%); }
.rangle-ui .intro-content { padding: calc(22px + var(--safe-top)) 22px calc(24px + var(--safe-bottom)); }
.rangle-ui .intro-count { font: 600 14px 'Barlow Condensed', sans-serif; color: var(--muted); }
.rangle-ui .intro-progress span { background: #ffffff24; }
.rangle-ui .intro-progress .active { background: var(--teal); }
.rangle-ui.rangle-intro h1 { font-size: 42px; margin: 0 0 15px; color: var(--paper); }
.rangle-ui.rangle-intro h1 em { color: var(--paper); font-style: normal; }
.rangle-ui .intro-lead { color: #d2dcda; font-size: 14px; line-height: 1.65; }
.rangle-ui .intro-detail { color: var(--muted); }
.rangle-ui .intro-visual { border-radius: 13px; background-color: #1b3540; }
.rangle-ui .intro-hero { border-radius: 0; height: 210px; }
.rangle-ui .intro-hero img { object-position: center 67%; }
.rangle-ui .intro-sticker { font: 700 13px 'Barlow Condensed', sans-serif; clip-path: polygon(3% 8%, 97% 0, 100% 88%, 1% 100%); }
.rangle-ui .intro-home { background: linear-gradient(140deg, #31576a, #16303b); color: var(--paper); }
.rangle-ui .intro-home img { box-shadow: 4px 7px 0 #24b9c15c; }
.rangle-ui .intro-guide { border: 1px solid var(--line); background: #ffffff08; color: #c8d2d1; }
.rangle-ui .intro-guide li::marker { color: var(--teal); }
.rangle-ui .intro-map { color: #0d1519; background-color: #dce3dc; }
.rangle-ui .intro-map-pin { background: var(--teal); }
.rangle-ui .intro-notify { background: linear-gradient(130deg, #224653, #16303b); }
.rangle-ui .intro-notify-card { background: var(--paper); color: #0d1519; box-shadow: 4px 5px 0 #0d15194d; }
.rangle-ui .intro-notify .intro-hand { color: var(--teal); }
.rangle-ui .intro-people { background: linear-gradient(140deg, #315466, #16303b); }
.rangle-ui .intro-people-mark { color: var(--pink); background: #244c5a; border-color: var(--paper); box-shadow: 4px 4px 0 var(--teal); }
.rangle-ui .intro-cta { min-height: 54px; clip-path: polygon(0 4%, 35% 1%, 65% 3%, 100% 0, 99% 96%, 57% 100%, 30% 98%, 1% 100%); }
.rangle-ui .intro-error { color: #ffacc6; }
.rangle-ui.login { padding-top: calc(28px + var(--safe-top)); }
.rangle-ui.login .mark { display: none; }
.rangle-ui.login > h1 { margin: 35px 0 28px; font: 58px 'Kaushan Script', cursive; color: var(--pink); transform: rotate(-6deg); }
.rangle-ui.login .apple-btn { border: 1px solid var(--line); background: #ffffff12; }
.rangle-ui.login .google-btn { background: var(--paper); color: #0d1519; }
.rangle-ui.login .linkish { color: var(--teal); }
.rangle-ui.login .login-fields input, .rangle-ui .handle-field, .rangle-ui .search-field,
.rangle-ui .rangle-input, .rangle-ui .feedback-box textarea {
  background: #ffffff0c; border: 1px solid #ffffff30; color: var(--ink); border-radius: 9px;
}
.rangle-ui input::placeholder, .rangle-ui textarea::placeholder { color: #aeb9bb; opacity: 1; }
.rangle-ui .handle-field input { color: var(--ink); }
.rangle-ui .chip { background: #ffffff0c; color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-size: 13px; }
.rangle-ui .chip.on { background: var(--pink); color: #0d1519; }
.rangle-ui .map-stage { border-radius: 12px; overflow: hidden; }
.rangle-ui .map-search { color: #0d1519; }
.rangle-ui .map-search input { color: #0d1519; }
.rangle-ui .map-search-note { color: var(--muted); }
.rangle-ui .install-steps, .rangle-ui .install-guide { color: var(--ink); }

/* Create: one calm form, with optional artwork below the essentials. */
.rangle-ui.plan-form > .pad { padding: 0 18px 22px; }
.rangle-ui .plan-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.rangle-ui .plan-nav .rangle-eyebrow { color: var(--muted); }
.rangle-form-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.rangle-ui .rangle-form-title h1 { font: 700 43px 'Caveat', cursive; margin: 0; transform: rotate(-4deg); }
.rangle-form-title > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #24b9c140; border-radius: 50%; color: var(--teal); transform: rotate(-12deg); }
.rangle-form-title svg { width: 27px; height: 27px; }
.rangle-ui .plan-activity { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 9px; background: #ffffff06; }
.rangle-ui .plan-activity-shot { width: 64px; height: 64px; border-radius: 8px; background: #17343f; }
.rangle-ui .plan-activity h2 { font: 700 25px/1.1 'Barlow Condensed', sans-serif; letter-spacing: .01em; margin: 0 0 5px; text-transform: none; }
.rangle-ui .plan-activity .text-btn { font-size: 11px; color: var(--teal); }
.rangle-ui .plan-sentence { color: var(--muted); font-size: 12px; font-weight: 400; margin: 9px 0 0; }
.rangle-ui .plan-section { margin-top: 23px; }
.rangle-ui .plan-head { font: 700 17px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.rangle-ui .plan-head svg { width: 18px; height: 18px; color: var(--teal); }
.rangle-ui .plan-head small { font: 400 11px 'Schibsted Grotesk', sans-serif; text-transform: none; color: var(--muted); }
.rangle-ui .plan-chips { gap: 7px; }
.rangle-ui .plan-chip {
  min-height: 41px; padding: 9px 11px; border: 1px solid #ffffff30; border-radius: 8px;
  background: #ffffff07; color: var(--ink); box-shadow: none;
  font: 600 14px 'Barlow Condensed', sans-serif;
}
.rangle-ui .plan-chip svg { width: 16px; height: 16px; }
.rangle-ui .plan-chip.on { background: var(--pink); border-color: var(--pink); color: #0d1519; box-shadow: none; }
.rangle-ui .plan-note { margin: 0; }
.rangle-ui .plan-note textarea { width: 100%; min-height: 88px; padding: 13px; border: 1px solid #ffffff30; border-radius: 9px; background: #ffffff0c; color: var(--ink); font: 13px/1.6 'Schibsted Grotesk', sans-serif; resize: vertical; }
.rangle-ui .plan-photo { gap: 8px; padding: 11px 0; font-size: 12px; color: var(--teal); }
.rangle-ui .plan-photo img, .rangle-ui .plan-photo-mark { width: 29px; height: 29px; border-radius: 6px; background: #ffffff12; }
.rangle-ui .plan-design { border-top: 1px solid var(--line); margin: 0; }
.rangle-ui .plan-design-toggle { background: transparent; color: var(--ink); box-shadow: none; padding: 12px 0; }
.rangle-ui .plan-design-copy b { font-size: 12px; font-weight: 500; }
.rangle-ui .plan-design-copy small, .rangle-ui .plan-design-note { color: var(--muted); font-size: 11px; }
.rangle-ui .plan-design-mark { width: 29px; height: 29px; border-radius: 6px; background: #ffffff12; color: var(--teal); font-size: 18px; }
.rangle-ui .plan-design-chevron { color: var(--muted); }
.rangle-ui .plan-go { margin-top: 23px; width: 100%; padding: 13px; }
.rangle-ui .plan-go + .rangle-form-help { text-align: center; }
.rangle-ui .day-cal { background: #17252b; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.rangle-ui .day-cal-nav button, .rangle-ui .day-cal-day { color: var(--ink); background: transparent; }
.rangle-ui .day-cal-week, .rangle-ui .day-cal-day:disabled { color: var(--muted); }
.rangle-ui .day-cal-day.on { color: #0d1519; background: var(--pink); }
.rangle-ui .clock-card { background: #17252b; color: var(--ink); }
.rangle-ui .clock-cell { color: var(--muted); }
.rangle-ui .clock-cell.on { color: var(--ink); }
.rangle-ui .clock-col { background: linear-gradient(180deg, #ffffff08, #ffffff08) center / 100% 44px no-repeat; }
.rangle-ui .clock-ok { background: var(--pink); color: #0d1519; }
.rangle-ui .invite-grabber { background: #ffffff30; }
.rangle-ui .invite-head p, .rangle-ui .invite-audience span,
.rangle-ui .invite-person > small, .rangle-ui .invite-group-copy > small,
.rangle-ui .invite-open p, .rangle-ui .invite-share-first p { color: var(--muted); font-weight: 400; }
.rangle-ui .invite-close { background: #ffffff12; color: var(--ink); border-radius: 9px; }
.rangle-ui .invite-audiences { grid-template-columns: 1fr 1fr; gap: 7px; }
.rangle-ui .invite-audience { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; gap: 3px 7px; height: auto; min-height: 69px; padding: 11px 9px; background: #ffffff06; border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.rangle-ui .invite-audience i { grid-row: span 2; align-self: center; }
.rangle-ui .invite-audience b { font: 700 16px 'Barlow Condensed', sans-serif; }
.rangle-ui .invite-audience span { font-size: 10px; }
.rangle-ui .invite-audience.on { border-color: var(--pink); background: #f94b8112; color: var(--paper); }
.rangle-ui .invite-person { border-color: var(--line); }
.rangle-ui .invite-check { border-color: #ffffff40; }
.rangle-ui .invite-group { background: #ffffff06; border: 1px solid var(--line); border-radius: 9px; }
.rangle-ui .invite-search { background: #ffffff0c; border: 1px solid #ffffff30; color: var(--muted); }
.rangle-ui .invite-share-primary, .rangle-ui .invite-done { background: linear-gradient(110deg, #ff6771, #f74480); color: #0d1519; border-radius: 9px; font: 700 17px 'Barlow Condensed', sans-serif; }
.rangle-ui .invite-share-copy, .rangle-ui .invite-alternatives button { background: #ffffff08; color: var(--paper); border: 1px solid var(--line); border-radius: 9px; }
.rangle-ui .invite-share-mark { color: #0d1519; }
.rangle-ui .invite-later, .rangle-ui .invite-empty { color: var(--muted); }
.rangle-ui .invite-footer { border-color: var(--line); background: #0d1519; }

/* Friends and crew: sharing, add people, then the people themselves. */
.rangle-ui .pad.rangle-crew-pad { padding: calc(18px + var(--safe-top)) 18px calc(104px + var(--safe-bottom)); }
.rangle-social-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 18px; }
.rangle-social-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 47px; padding: 10px; border-radius: 9px; border: 1px solid #ffffff35; background: transparent; color: var(--paper); font: 700 15px 'Barlow Condensed', sans-serif; }
.rangle-social-actions button:first-child { background: var(--paper); border-color: var(--paper); color: #0d1519; }
.rangle-social-actions svg { width: 19px; height: 19px; }
.rangle-tools { border: 1px solid var(--line); border-radius: 11px; margin-bottom: 22px; padding: 0 13px; background: #ffffff04; }
.rangle-tools summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; min-height: 51px; font: 700 18px 'Barlow Condensed', sans-serif; list-style: none; }
.rangle-tools summary::-webkit-details-marker { display: none; }
.rangle-tools summary span { color: var(--pink); font-size: 23px; }
.rangle-tools[open] summary span { transform: rotate(45deg); }
.rangle-tools > .rangle-field-label { display: block; font-size: 13px; margin: 8px 0; color: var(--muted); }
.rangle-friend-search { display: flex; gap: 8px; margin-bottom: 7px; }
.rangle-ui .rangle-friend-search .ios-field { flex: 1; min-width: 0; border: 1px solid #ffffff30; background: #ffffff0c; border-radius: 9px; padding: 12px; }
.rangle-friend-search button { display: grid; place-items: center; width: 46px; flex: none; border: 0; border-radius: 9px; background: var(--pink); color: #0d1519; }
.rangle-friend-search svg { width: 21px; height: 21px; }
.rangle-contact-action { display: flex; align-items: center; gap: 10px; padding: 14px 0; width: 100%; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--teal); font-size: 12px; text-align: left; }
.rangle-contact-action svg { width: 20px; height: 20px; }
.rangle-contact-action span:last-child { margin-left: auto; font-size: 20px; }
.rangle-tools > .rangle-form-help { margin: 0 0 14px; }
.rangle-friend-section { margin: 24px 0 0; }
.rangle-friend-section h2 { margin: 0 0 11px; }
.rangle-ui .ios-group { margin: 0; background: transparent; border-radius: 0; }
.rangle-ui .ios-group > * + *::before { left: 0; height: 1px; background: var(--line); }
.rangle-ui .ios-group > * + .has-avatar::before { left: 52px; }
.rangle-ui .ios-row { min-height: 62px; gap: 12px; padding: 11px 0; font-size: 13px; }
.rangle-ui .ios-row .name { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.rangle-ui .ios-row .meta { font-size: 11px; margin-top: 4px; color: var(--muted); }
.rangle-ui .ios-inline { min-height: 38px; padding: 5px 10px; background: #ffffff09; border: 1px solid #ffffff30; border-radius: 8px; color: var(--paper); font-size: 11px; }
.rangle-ui .ios-inline.quiet { background: none; border-color: transparent; color: var(--muted); padding: 5px; }
.rangle-ui .ios-empty { padding: 15px; margin: 0; border: 1px dashed #ffffff35; border-radius: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.rangle-ui .ios-field { color: var(--ink); background: #ffffff0c; font-size: 13px; }
.rangle-ui .ios-search { background: #ffffff0c; border: 1px solid #ffffff30; color: var(--muted); }
.rangle-ui .ios-search input { color: var(--ink); }
.rangle-ui.rangle-activities .ios-pad { padding: 8px 18px 30px; }
.rangle-ui .ios-switch:checked { background-color: var(--teal); }
.rangle-ui .ios-note, .rangle-ui .ios-footer { color: var(--muted); font-size: 11px; }
.rangle-ui .ios-section { color: var(--paper); font: 700 19px 'Barlow Condensed', sans-serif; margin: 25px 0 8px; }
.rangle-ui .ios-section.plain { color: var(--muted); font: 400 12px/1.6 'Schibsted Grotesk', sans-serif; margin: 12px 0; }
.rangle-ui .placeholder-avatar { background: #315362; color: var(--paper); font: 700 18px 'Barlow Condensed', sans-serif; }
.rangle-ui .rangle-friend-pick { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border: 1px solid #ffffff35; border-radius: 50%; color: transparent; }
.rangle-ui .rangle-friend-pick.on { background: var(--teal); color: #0d1519; border-color: var(--teal); }
.rangle-section-heading > .text-btn { padding: 9px 0; margin: -8px 0 3px; white-space: nowrap; }
.rangle-crew-grid { display: grid; gap: 8px; }
.rangle-crew-grid > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; background: #ffffff06; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.rangle-crew-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--teal); background: #24b9c112; border-radius: 8px; }
.rangle-crew-icon svg { width: 23px; height: 23px; }
.rangle-crew-grid strong { display: block; font-size: 13px; }
.rangle-crew-grid small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.rangle-chevron { margin-left: auto; font-size: 24px; color: var(--pink); }
.rangle-ui .friend-code-card { background: #17252b; color: var(--ink); }
.rangle-ui .friend-code-card p { color: var(--muted); font-size: 12px; }
.rangle-ui .tabs { position: fixed; top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); width: min(100%, 430px); z-index: 40; height: calc(73px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: #091113ed; border-top: 1px solid var(--line); border-radius: 23px 23px 0 0; backdrop-filter: blur(14px); }
.rangle-ui .tabs .tab { color: #dce3e0; font: 700 13px 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.rangle-ui .tabs .tab.on { color: var(--pink); }
.rangle-ui .tabs .tab-plus { background: var(--pink); color: #0d1519; border: 3px solid #0d1519; box-shadow: 0 4px 0 #080e10; }
.rangle-ui .tabs .tab-plus.ready { animation: none; }
.rangle-ui.rangle-crew .crew-pad { padding: 5px 18px 30px; }

/* Profile and settings share the same quiet list treatment. */
.rangle-profile-heading { display: flex; align-items: center; gap: 16px; margin: 8px 0 27px; }
.rangle-profile-heading .avatar, .rangle-profile-heading .placeholder-avatar { border: 2px solid var(--paper); flex: none; }
.rangle-ui .rangle-profile-heading h1 { font-size: 30px; margin: 0 0 6px; overflow-wrap: anywhere; }
.rangle-profile-heading p { color: var(--muted); margin: 0; font-size: 11px; }
.rangle-profile-section { margin-top: 26px; }
.rangle-profile-section > h2 { margin: 0 0 9px; }
.rangle-picture-note { margin: 8px 0; color: var(--muted); font-size: 12px; }
.rangle-settings-row:disabled { opacity: .55; cursor: wait; }
.rangle-settings-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.rangle-settings-icon { display: grid; place-items: center; width: 24px; flex: none; color: var(--teal); font-size: 21px; }
.rangle-settings-icon svg { width: 23px; height: 23px; }
.rangle-settings-row strong { display: block; font-size: 13px; font-weight: 500; }
.rangle-settings-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.rangle-settings-row .rangle-chevron { color: var(--muted); font-size: 20px; }
.rangle-ui.rangle-profile .activity-row { background: transparent !important; color: var(--ink); border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 14px 0; margin-top: 0 !important; box-shadow: none; }
.rangle-ui.rangle-profile .activity-row .name { font-size: 13px; }
.rangle-ui.rangle-profile .activity-row .meta { font-size: 11px; color: var(--muted); }
.rangle-name-settings { margin: 14px 0 0; padding: 14px; background: #ffffff05; border: 1px solid var(--line); border-radius: 10px; }
.rangle-name-settings > label { display: block; font-size: 12px; }
.rangle-name-settings .search-field { margin: 8px 0 10px; font-size: 13px; }
.rangle-name-settings .rangle-checkbox { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.rangle-name-settings input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--teal); }
.rangle-name-settings p { margin: 10px 0 0; font-size: 11px; line-height: 1.6; }
.rangle-ui .backdrop-row { margin: 12px 0 0; }
.rangle-ui .backdrop-card { background: #17252b; color: var(--ink); border: 1px solid var(--line); box-shadow: none; border-radius: 10px; }
.rangle-ui .backdrop-card.on { border-color: var(--pink); }
.rangle-ui .feedback-box { background: #ffffff05; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 26px; }
.rangle-ui .feedback-box h2 { margin: 0 0 8px; }
.rangle-ui .feedback-box p { color: var(--muted); font-size: 12px; }
.rangle-ui .privacy { color: var(--muted); font-size: 11px; line-height: 1.7; }
.rangle-ui .privacy h2 { color: var(--ink); }
.rangle-ui .rangle-account-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }
.rangle-ui .rangle-account-actions .text-btn { color: #ff94ad; font-size: 12px; }

/* Activity selection and the remaining lists. */
.rangle-ui.choose-screen { background: #0d1519; }
.rangle-ui .choose-home-scroll { background: #0d1519; }
.rangle-ui .choose-sticky { background: #0d1519; border-bottom: 1px solid var(--line); }
.rangle-ui .choose-heading h1 { font: 700 36px/1.05 'Caveat', cursive; letter-spacing: 0; }
.rangle-ui .choose-heading p { color: var(--muted); font-size: 12px; }
.rangle-ui .choose-search { background: #ffffff0c; border: 1px solid #ffffff30; border-radius: 10px; color: var(--muted); box-shadow: none; }
.rangle-ui .choose-search input { color: var(--ink); }
.rangle-ui .choose-search input::placeholder { color: var(--muted); }
.rangle-ui .choose-search-clear { color: var(--muted); }
.rangle-ui .choose-head h2 { font: 700 22px 'Barlow Condensed', sans-serif; }
.rangle-ui .choose-more { color: var(--teal); font-size: 12px; }
.rangle-ui .choose-head small, .rangle-ui .choose-cat-empty { color: var(--muted); }
.rangle-ui .vibe, .rangle-ui .choose-categories button { background: #ffffff07; border: 1px solid #ffffff28; color: var(--paper); box-shadow: none; border-radius: 8px; font: 600 13px 'Barlow Condensed', sans-serif; }
.rangle-ui .vibe.on, .rangle-ui .choose-categories button.on { color: #0d1519; background: var(--pink); border-color: var(--pink); }
.rangle-ui .vibe i { color: var(--teal); }
.rangle-ui .vibe.on i { color: #0d1519; }
.rangle-ui .choose-recommendation { background: #102129; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; outline: 0; }
.rangle-ui .choose-rec-photo { background: #17343f; }
.rangle-ui .choose-rec-photo:before { opacity: .22; }
.rangle-ui .choose-rec-copy { background: linear-gradient(0deg, #091113f5, #091113b0 75%, transparent); color: var(--paper); }
.rangle-ui .choose-rec-copy small { color: #dce3e0; font-size: 11px; }
.rangle-ui .choose-rec-copy b { font: 700 22px 'Barlow Condensed', sans-serif; }
.rangle-ui .choose-proof { color: var(--muted); background: #102129; border-color: var(--line); }
.rangle-ui .choose-dock { background: #0d1519f5; border-top: 1px solid var(--line); }
.rangle-ui .surprise { background: linear-gradient(110deg, #ff6771, #f74480); border-radius: 11px; color: #101519; box-shadow: none; }
.rangle-ui .surprise-copy b { font: 700 23px 'Caveat', cursive; }
.rangle-ui .surprise-copy small { color: #182b31; font-size: 11px; }
.rangle-ui .surprise-mark, .rangle-ui .surprise-go { color: #101519; }
.rangle-ui .hit-card, .rangle-ui .idea-card, .rangle-ui .activity-row { background: #ffffff06; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.rangle-ui .hit-card .meta, .rangle-ui .idea-card small, .rangle-ui .activity-row .meta { color: var(--muted); }
.rangle-ui .mine-activity-copy small, .rangle-ui .mine-activity .plan-meta { color: var(--muted); }
.rangle-ui .hit-mark { background: #17343f; color: var(--teal); }
.rangle-ui .hit-card .chevron, .rangle-ui .idea-card .chevron { color: var(--pink); }
.rangle-ui .activity-row .name { font-size: 14px; }
.rangle-ui .note-card { background: #ffffff06; color: var(--ink); border: 1px solid var(--line); box-shadow: none; border-radius: 11px; }
.rangle-ui .note-body, .rangle-ui .note-time, .rangle-ui .note-extra { color: var(--muted); }
.rangle-ui .note-seen { color: var(--teal); }
.rangle-ui .poster-filters { background: transparent; }
.rangle-ui .poster-filters button { background: #ffffff09; color: var(--paper); border: 1px solid var(--line); }
.rangle-ui .poster-filters button.on { background: var(--pink); color: #0d1519; }
.rangle-ui .install-note, .rangle-ui .install-fallback { background: #ffffff09; border: 1px solid var(--line); color: var(--muted); }
.rangle-ui.login .ios-soon { background: #ffffff09; color: var(--paper); border: 1px solid var(--line); box-shadow: none; }

@media (max-height: 740px) {
  .rangle-ui .intro-content { padding-top: calc(14px + var(--safe-top)); }
  .rangle-ui .intro-hero { height: 175px; }
  .rangle-ui.rangle-intro h1 { font-size: 37px; }
}
@media (max-width: 360px) {
  .rangle-ui.plan-form > .pad, .rangle-ui .pad.rangle-crew-pad { padding-left: 15px; padding-right: 15px; }
  .rangle-ui .plan-chip { padding: 9px; font-size: 13px; }
  .rangle-ui .ios-inline { padding: 5px 7px; }
  .rangle-ui .intro-home { gap: 18px; }
  .rangle-ui .intro-notify-card { padding: 12px; gap: 8px; }
}