/*
 * NobodyChat — mobile-first styles.
 * Written for very wide browser support: no CSS variables, no flex `gap`,
 * no nesting, no :has(). Works back to old Android WebViews and iOS Safari.
 */

*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
  color: #17151f;
  background: #f6f5fb;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
a { color: #5b3df5; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
p { margin: 0 0 12px; }

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: #fff; padding: 8px; z-index: 10; }

/* Header */
.top { background: #fff; border-bottom: 1px solid #e7e4f2; }
.top-in { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; min-height: 56px; }
.brand { font-weight: 800; font-size: 19px; color: #17151f; text-decoration: none; letter-spacing: -0.3px; }
.brand span { color: #5b3df5; }
.top nav a { margin-left: 14px; text-decoration: none; font-weight: 600; color: #17151f; display: inline-block; padding: 8px 0; }
.top nav .nav-cta { background: #5b3df5; color: #fff; padding: 8px 14px; border-radius: 999px; }

/* main also has .wrap, so this needs the extra specificity to keep its top/bottom space. */
main.wrap { padding-top: 24px; padding-bottom: 48px; min-height: 60vh; }
main.wrap > :first-child { margin-top: 0; }

/* Cards and forms */
.card { background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 20px 16px; margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=password], textarea, select {
  display: block; width: 100%; font: inherit; font-size: 16px; /* 16px stops iOS zoom */
  padding: 12px; border: 1px solid #cfcadf; border-radius: 12px; background: #fff; color: inherit;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid #5b3df5; outline-offset: 1px; border-color: #5b3df5; }
.field { margin-bottom: 16px; }
.hint { font-size: 14px; color: #6b6780; margin: 6px 0 0; }
.prefix { display: -webkit-box; display: -webkit-flex; display: flex; border: 1px solid #cfcadf; border-radius: 12px; background: #fff; overflow: hidden; }
.prefix span { padding: 12px 0 12px 12px; color: #6b6780; white-space: nowrap; }
.prefix input { border: 0; border-radius: 0; padding-left: 2px; min-width: 0; }
.radio { display: block; font-weight: 400; padding: 10px 0; }
.radio input { margin-right: 8px; }
.check { font-weight: 400; }
.check input { margin-right: 8px; }

/* Buttons */
.btn {
  display: inline-block; font: inherit; font-weight: 700; font-size: 16px; text-align: center; text-decoration: none;
  background: #5b3df5; color: #fff; border: 2px solid #5b3df5; border-radius: 999px;
  padding: 12px 20px; min-height: 48px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.btn:hover, .btn:focus { background: #4a2fe0; border-color: #4a2fe0; color: #fff; }
.btn.block { display: block; width: 100%; }
.btn.ghost { background: transparent; color: #5b3df5; }
.btn.ghost:hover, .btn.ghost:focus { background: #efebff; color: #4a2fe0; }
.btn.danger { background: #c62f45; border-color: #c62f45; }
.btn.small { padding: 6px 14px; min-height: 40px; font-size: 14px; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.link-btn { background: none; border: 0; padding: 8px 0; margin-right: 16px; font: inherit; font-size: 14px; color: #6b6780; cursor: pointer; text-decoration: none; display: inline-block; }
.link-btn:hover, .link-btn:focus { color: #5b3df5; }
.stack > * { margin-bottom: 10px; }
.inline { display: inline; }

/* Alerts */
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 15px; }
.alert.error { background: #fdecef; color: #8c1d2f; border: 1px solid #f5c2cb; }
.alert.ok { background: #e8f8ef; color: #1b5e3a; border: 1px solid #bfe8d0; }
.alert.info { background: #efebff; color: #33228f; border: 1px solid #d8d0ff; }

/* Landing */
.hero { text-align: center; padding: 28px 0 8px; }
.hero h1 { font-size: 34px; letter-spacing: -0.8px; }
.hero h1 span { color: #5b3df5; }
.hero p { color: #4a4660; font-size: 18px; }
.features { list-style: none; padding: 0; margin: 24px 0; }
.features li { background: #fff; border: 1px solid #e7e4f2; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.features strong { display: block; }

/* Credentials */
.secret { font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 24px; letter-spacing: 1px; background: #f6f5fb; border: 2px dashed #5b3df5; border-radius: 12px; padding: 14px; text-align: center; margin: 6px 0 12px; -webkit-user-select: all; user-select: all; }
.secret.name { font-size: 18px; border-style: solid; border-color: #e7e4f2; }

/* Profile */
.profile-head { text-align: center; }
.avatar { width: 72px; height: 72px; line-height: 72px; border-radius: 50%; background: #5b3df5; color: #fff; font-size: 30px; font-weight: 800; margin: 0 auto 10px; text-align: center; }
.handle { color: #6b6780; margin-top: -6px; }
.prompt { background: #5b3df5; color: #fff; font-weight: 700; font-size: 18px; border-radius: 16px 16px 16px 4px; padding: 14px 16px; margin: 16px 0; }
.counter { float: right; font-size: 13px; color: #6b6780; }

/* Inbox */
.share-link { font-weight: 700; word-break: break-all; }
.msg { background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.msg-body { white-space: pre-wrap; font-size: 17px; margin-bottom: 8px; }
.msg-meta { font-size: 13px; color: #6b6780; }
.msg-actions { border-top: 1px solid #f0eef7; margin-top: 10px; padding-top: 4px; }
.fav { color: #c79100; }
.empty { text-align: center; color: #6b6780; padding: 32px 16px; }
.stat { font-size: 14px; color: #6b6780; }
.session { border-bottom: 1px solid #f0eef7; padding: 10px 0; }
.session:last-child { border-bottom: 0; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; background: #efebff; color: #5b3df5; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.js-only { display: none; }
.js .js-only { display: inline-block; }

/* Legal */
.legal h2 { margin-top: 24px; }
.legal ul { padding-left: 20px; }

/* Turnstile */
.turnstile { margin-bottom: 16px; min-height: 65px; }

/* Footer */
.foot { color: #6b6780; font-size: 14px; text-align: center; padding: 24px 0 120px; }
.foot a { color: #6b6780; }

/* Cookie banner */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; background: #17151f; color: #fff; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); z-index: 20; font-size: 14px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); }
.cookie p { margin: 0 0 10px; }
.cookie a { color: #c9bdff; }
.cookie .btn { margin: 0 8px 0 0; }
.cookie .btn.ghost { color: #fff; border-color: #6b6780; }

@media (min-width: 600px) {
  h1 { font-size: 30px; }
  .hero h1 { font-size: 44px; }
  .card { padding: 24px; }
}




.ok-text { color: #1b7a47; }
.err-text { color: #b3263b; }

fieldset.plain { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; }

/* ---------------------------------------------------------------- nav extras */
.nav-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #e5304f; color: #fff; font-size: 11px; font-weight: 800; text-align: center; vertical-align: 2px; }
.top nav { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.top nav a { margin-left: 12px; }
.top nav > a:not(.nav-cta) { padding: 8px 2px; }
@media (max-width: 380px) {
  .brand { font-size: 17px; }
  .top nav a { margin-left: 8px; font-size: 15px; }
  .theme-toggle { width: 34px; height: 34px; line-height: 32px; font-size: 15px; }
}
.center { text-align: center; }
.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; color: #6b6780; margin: 20px 4px 8px; }
.danger-text { color: #c62f45 !important; }
hr { border: 0; border-top: 1px solid #e7e4f2; margin: 16px 0; }

/* ---------------------------------------------------------------- avatars */
.avatar.sm { width: 42px; height: 42px; line-height: 42px; font-size: 18px; margin: 0; -webkit-flex-shrink: 0; flex-shrink: 0; }
.av0 { background: #5b3df5; background-image: linear-gradient(135deg, #7b5cff, #4a2fe0); }
.av1 { background: #e5304f; background-image: linear-gradient(135deg, #ff6b81, #d81b45); }
.av2 { background: #13a37f; background-image: linear-gradient(135deg, #2ed3a6, #0d8a6a); }
.av3 { background: #f08c00; background-image: linear-gradient(135deg, #ffb238, #e07000); }
.av4 { background: #1c7ed6; background-image: linear-gradient(135deg, #4dabf7, #1864ab); }
.av5 { background: #ae3ec9; background-image: linear-gradient(135deg, #da77f2, #9c36b5); }
.av6 { background: #0b7285; background-image: linear-gradient(135deg, #22b8cf, #0b7285); }
.av7 { background: #d6336c; background-image: linear-gradient(135deg, #f783ac, #c2255c); }

/* ---------------------------------------------------------------- chat list */
.card.list { padding: 4px 0; }
.chat-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 12px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid #f0eef7; }
.chat-item:last-child { border-bottom: 0; }
.chat-item-main { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; margin: 0 12px; }
.chat-item-name { display: block; font-weight: 700; }
.chat-item-last { display: block; color: #6b6780; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.unread .chat-item-last { color: #17151f; font-weight: 600; }
.chat-item-time { font-size: 12px; color: #6b6780; text-align: right; white-space: nowrap; }
.dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #5b3df5; margin: 6px 0 0 auto; }
.chat-cta { margin: 4px 0 6px; }

/* ---------------------------------------------------------------- chat view */
.chat-head { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 10px 12px; margin-bottom: 12px; position: -webkit-sticky; position: sticky; top: 0; z-index: 5; }
.chat-head .back { font-size: 32px; line-height: 1; text-decoration: none; margin-right: 10px; color: #5b3df5; padding: 0 4px 4px; }
.chat-head-main { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 10px; }
.chat-head-main strong, .chat-head-main .hint { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.friend-meter { background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.friend-meter-top { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; font-weight: 700; margin-bottom: 6px; }
.friend-meter .hint { margin-top: 6px; }
.friend-meter form { margin-top: 10px; }
progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 5px; background: #efebff; color: #5b3df5; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; }
progress::-webkit-progress-bar { background: #efebff; border-radius: 5px; }
progress::-webkit-progress-value { background: #5b3df5; background-image: linear-gradient(90deg, #7b5cff, #e5304f); border-radius: 5px; }
progress::-moz-progress-bar { background: #5b3df5; border-radius: 5px; }

.msgs { list-style: none; margin: 0; padding: 4px 0; }
.bubble { max-width: 82%; padding: 9px 13px 6px; margin: 4px 0; border-radius: 18px; clear: both; font-size: 16px; word-wrap: break-word; overflow-wrap: break-word; }
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble .time { display: block; font-size: 11px; opacity: 0.7; text-align: right; margin-top: 2px; }
.bubble.theirs { float: left; background: #fff; border: 1px solid #e7e4f2; border-bottom-left-radius: 6px; }
.bubble.mine { float: right; background: #5b3df5; background-image: linear-gradient(135deg, #7b5cff, #5b3df5); color: #fff; border-bottom-right-radius: 6px; }
.bubble.system { float: none; max-width: 100%; margin: 10px auto; text-align: center; background: #efebff; color: #33228f; font-size: 13px; border-radius: 12px; }
.msgs:after { content: ""; display: table; clear: both; }
.pop { -webkit-animation: pop 0.22s ease-out; animation: pop 0.22s ease-out; }
@-webkit-keyframes pop { from { -webkit-transform: scale(0.92); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.seen { clear: both; text-align: right; font-size: 12px; color: #6b6780; margin: 0 4px 8px; min-height: 16px; }
.seen.is-seen { color: #5b3df5; font-weight: 700; }
.typing { display: none; font-size: 13px; color: #6b6780; margin: 0 4px 10px; }
.dots { display: inline-block; background: #fff; border: 1px solid #e7e4f2; border-radius: 14px; padding: 6px 10px; margin-right: 4px; }
.dots i { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: #8f8aa6; -webkit-animation: blink 1.2s infinite; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.dots i:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
@-webkit-keyframes blink { 0%, 80%, 100% { opacity: 0.25; -webkit-transform: translateY(0); } 40% { opacity: 1; -webkit-transform: translateY(-3px); } }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.composer { position: -webkit-sticky; position: sticky; bottom: 0; background: #f6f5fb; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 5; }
.composer-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
.composer textarea { min-height: 48px; max-height: 140px; border-radius: 24px; padding: 12px 16px; resize: none; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.btn.send { width: 48px; height: 48px; padding: 0; margin-left: 8px; border-radius: 50%; font-size: 20px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.emoji-bar { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }
.js .emoji-bar.js-only { display: block; }
.emoji { background: #fff; border: 1px solid #e7e4f2; border-radius: 999px; font-size: 20px; width: 40px; height: 40px; margin-right: 6px; cursor: pointer; padding: 0; }
.chat-menu summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.menu-section { border-top: 1px solid #f0eef7; margin-top: 12px; padding-top: 12px; }
.menu-section h3 { font-size: 16px; }
.connect-choice { background: #f6f5fb; border-radius: 12px; padding: 12px !important; }

/* ---------------------------------------------------------------- credits and ads */
.credit-hero { text-align: center; }
.credit-balance { font-size: 44px; font-weight: 800; letter-spacing: -1px; }
.ad-card { text-align: center; }
.ad-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6b6780; }
.ad-slot { background: #17151f; background-image: linear-gradient(135deg, #2a1f6b, #17151f); color: #fff; border-radius: 16px; padding: 32px 16px; margin-bottom: 16px; }
.ad-art { font-size: 48px; }



/* ---------------------------------------------------------------- content and SEO pages */
.eyebrow { font-weight: 800; color: #5b3df5; text-transform: uppercase; letter-spacing: 1px; font-size: 13px !important; margin-bottom: 8px; }
.lead { font-size: 18px; color: #4a4660; }
.crumbs { font-size: 14px; color: #6b6780; margin-bottom: 12px; }
.crumbs a { color: #6b6780; }
.steps { padding-left: 36px; }
.steps li { margin-bottom: 12px; padding-left: 4px; }
.topic-grid { overflow: hidden; margin: 0 -5px 12px; }
.topic-card { float: left; width: 50%; width: calc(50% - 10px); margin: 5px; box-sizing: border-box; background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 16px 14px; text-decoration: none; color: inherit; min-height: 96px; }
.topic-card:hover, .topic-card:focus { border-color: #5b3df5; }
.topic-card strong, .topic-card .hint { display: block; }
.topic-emoji { display: block; font-size: 28px; margin-bottom: 4px; }
.question-list { list-style: none; padding: 0; counter-reset: q; }
.question-list li { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; background: #fff; border: 1px solid #e7e4f2; border-radius: 14px; padding: 10px 12px 10px 14px; margin-bottom: 8px; counter-increment: q; }
.question-list li:before { content: counter(q) "."; font-weight: 800; color: #5b3df5; margin-right: 8px; -webkit-align-self: flex-start; align-self: flex-start; }
.question-list li span { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; }
.question-list li .btn { -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 10px; }
.cta-card { text-align: center; background: #efebff; border-color: #d8d0ff; }
.faq { border-bottom: 1px solid #f0eef7; padding: 10px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 8px 0 0; }
.legal section + section { margin-top: 8px; }
@media (min-width: 600px) {
  .topic-card { width: calc(33.333% - 10px); }
}


/* ---------------------------------------------------------------- sign-up names */
.name-row { display: -webkit-box; display: -webkit-flex; display: flex; }
.name-row input { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; }
.btn.shuffle { width: 52px; min-width: 52px; padding: 0; margin-left: 8px; font-size: 22px; line-height: 44px; border-radius: 12px; }
.link-preview { background: #efebff; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; overflow-wrap: break-word; word-wrap: break-word; }
.link-preview strong { display: inline-block; max-width: 100%; }
.link-preview strong { color: #33228f; }
.change-username { margin-bottom: 16px; }
.change-username summary { cursor: pointer; color: #5b3df5; font-weight: 600; font-size: 14px; padding: 4px 0; }
.change-username .field { margin: 10px 0 0; }


/* ================================================================ motion
 * Progressive: browsers without these features simply skip them.
 * Everything is switched off for people who ask for reduced motion.
 */

/* Smooth cross-page navigation (Chrome 126+, Safari 18.2+). */
@view-transition { navigation: auto; }
::view-transition-old(root) { -webkit-animation: vt-out 0.18s ease-in both; animation: vt-out 0.18s ease-in both; }
::view-transition-new(root) { -webkit-animation: vt-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation: vt-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.top { view-transition-name: site-header; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Page entrance */
main { -webkit-animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@-webkit-keyframes rise { from { opacity: 0; -webkit-transform: translateY(10px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Staggered lists */
.features li, .topic-card, .question-list li, .msg, .chat-item, .guide-card, .stat-tile, .steps li {
  -webkit-animation: rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation: rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.features li:nth-child(2), .topic-card:nth-child(2), .question-list li:nth-child(2), .msg:nth-of-type(2), .chat-item:nth-child(2), .guide-card:nth-child(2), .stat-tile:nth-child(2), .steps li:nth-child(2) { -webkit-animation-delay: 0.04s; animation-delay: 0.04s; }
.features li:nth-child(3), .topic-card:nth-child(3), .question-list li:nth-child(3), .msg:nth-of-type(3), .chat-item:nth-child(3), .guide-card:nth-child(3), .stat-tile:nth-child(3), .steps li:nth-child(3) { -webkit-animation-delay: 0.08s; animation-delay: 0.08s; }
.features li:nth-child(4), .topic-card:nth-child(4), .question-list li:nth-child(4), .msg:nth-of-type(4), .chat-item:nth-child(4), .guide-card:nth-child(4), .stat-tile:nth-child(4), .steps li:nth-child(4) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; }
.features li:nth-child(n+5), .topic-card:nth-child(n+5), .question-list li:nth-child(n+5), .msg:nth-of-type(n+5), .chat-item:nth-child(n+5), .guide-card:nth-child(n+5), .stat-tile:nth-child(n+5), .steps li:nth-child(n+5) { -webkit-animation-delay: 0.16s; animation-delay: 0.16s; }

/* Hero */
.hero h1 span { background: linear-gradient(90deg, #7b5cff, #e5304f, #7b5cff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: shine 6s linear infinite; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
@-webkit-keyframes shine { to { background-position: 200% center; } }

/* Interactive feedback */
.btn, .link-btn, .chip, .emoji, .theme-toggle, .topic-card, .guide-card, .chat-item, .stat-tile {
  -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, -webkit-transform 0.15s;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn:active, .chip:active, .emoji:active, .theme-toggle:active { -webkit-transform: scale(0.96); transform: scale(0.96); }
.btn:not(.ghost):hover { box-shadow: 0 6px 18px rgba(91, 61, 245, 0.35); }
.topic-card:hover, .guide-card:hover, .stat-tile:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23, 21, 31, 0.08); }
.emoji:hover { -webkit-transform: scale(1.15); transform: scale(1.15); }
a, summary { -webkit-tap-highlight-color: rgba(91, 61, 245, 0.15); }

/* Alerts slide in; open <details> fades in */
.alert { -webkit-animation: drop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation: drop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
@-webkit-keyframes drop { from { opacity: 0; -webkit-transform: translateY(-8px); } }
details[open] > *:not(summary) { -webkit-animation: rise 0.25s ease-out both; animation: rise 0.25s ease-out both; }

/* Smooth theme change */
body, .top, .card, .msg, .bubble, .chat-head, .friend-meter, input, textarea, .topic-card, .question-list li, .foot {
  -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Sticky, frosted header */
.top { position: -webkit-sticky; position: sticky; top: 0; z-index: 15; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
}
.chat-head { top: 66px; }

/* Theme toggle */
.theme-form { margin-left: 8px; }
.theme-toggle { background: none; border: 1px solid #e7e4f2; border-radius: 999px; width: 38px; height: 38px; padding: 0; cursor: pointer; font-size: 17px; line-height: 36px; vertical-align: middle; }
.ti { display: none; }
html:not([data-theme="dark"]) .ti-moon { display: inline; }
html[data-theme="dark"] .ti-sun { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ti-moon { display: none; }
  html:not([data-theme]) .ti-sun { display: inline; }
}
.theme-picker { margin: 12px 0; }
.theme-picker span { margin-right: 6px; }
.chip { display: inline-block; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; margin: 2px; border-radius: 999px; border: 1px solid #e7e4f2; background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
.chip.on { background: #5b3df5; border-color: #5b3df5; color: #fff; }

/* Footer link hub */
.foot-grid { text-align: left; overflow: hidden; margin: 0 -8px 8px; }
.foot-grid > div { float: left; width: 50%; padding: 0 8px; margin-bottom: 16px; box-sizing: border-box; }
.foot-grid h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 8px; color: inherit; }
.foot-grid a { display: block; padding: 4px 0; text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
@media (min-width: 600px) { .foot-grid > div { width: 25%; } }

/* Articles and guides */
.article h2 { margin-top: 28px; }
.article p, .article li { font-size: 17px; line-height: 1.65; }
.meta-line { color: #6b6780; font-size: 14px; }
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 28px; position: relative; margin-bottom: 10px; }
.ticks li:before { content: "✓"; position: absolute; left: 4px; color: #13a37f; font-weight: 800; }
.related { padding-left: 20px; }
.related li { margin-bottom: 8px; }
.guide-list { margin-bottom: 20px; }
.guide-card { display: block; background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 16px; margin-bottom: 10px; text-decoration: none; color: inherit; }
.guide-card strong { display: block; margin-bottom: 4px; color: #5b3df5; }

/* Admin */
.admin-nav { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px 16px; padding: 0 16px 6px; }
.admin-nav a { display: inline-block; padding: 8px 12px; margin-right: 4px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: inherit; }
.admin-nav a.on { background: #5b3df5; color: #fff; }
.stat-grid { overflow: hidden; margin: 0 -5px 8px; }
.stat-tile { float: left; width: calc(50% - 10px); margin: 5px; box-sizing: border-box; background: #fff; border: 1px solid #e7e4f2; border-radius: 16px; padding: 14px; text-decoration: none; color: inherit; }
.stat-tile.warn { border-color: #f5c2cb; background: #fdecef; }
.stat-value { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.stat-label { display: block; font-size: 13px; color: #6b6780; }
@media (min-width: 600px) { .stat-tile { width: calc(33.333% - 10px); } }
.transcript { white-space: pre-wrap; font-family: inherit; background: #f6f5fb; border-radius: 12px; padding: 12px; margin: 8px 0; max-height: 320px; overflow: auto; }
.admin-actions .btn { margin: 4px 6px 4px 0; }
.search-row { display: -webkit-box; display: -webkit-flex; display: flex; margin-bottom: 10px; }
.search-row input { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin-right: 8px; }
.rule-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 6px 0; font-size: 14px; }
.rule-name { width: 40%; font-family: Menlo, Consolas, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.rule-row progress { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 8px; }
.rule-n { width: 30%; text-align: right; color: #6b6780; font-size: 12px; }
.admin-login { max-width: 420px; margin: 24px auto; }

/* Share card button in inbox */
.share-card-btn { color: #5b3df5 !important; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after, ::view-transition-old(root), ::view-transition-new(root) {
    -webkit-animation: none !important; animation: none !important; -webkit-transition: none !important; transition: none !important;
  }
  .hero h1 span { -webkit-text-fill-color: #5b3df5; background: none; }
}

/* ================================================================ themes
 * html[data-theme="dark"]  -> dark, chosen by the user
 * html[data-theme="light"] -> light, chosen by the user
 * no data-theme            -> follow the device setting
 * Each dark rule appears twice (forced + system); edit both together.
 */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .tabbar { background: rgba(17, 16, 24, 0.9); border-color: #2a2836; box-shadow: none; }
html[data-theme="dark"] .tabbar a { color: #9d99b3; }
html[data-theme="dark"] .tabbar a.on { color: #c9bdff; background: #221c45; }
html[data-theme="dark"] .credit-pill { background: #221c45; color: #d8d0ff !important; }
html[data-theme="dark"] .top-links a.on { color: #a996ff; }
html[data-theme="dark"] .seg { background: #221c45; }
html[data-theme="dark"] .toast { background: #ecebf3; color: #17151f; }
html[data-theme="dark"] a.btn:not(.ghost), html[data-theme="dark"] .top nav .nav-cta, html[data-theme="dark"] .admin-nav a.on, html[data-theme="dark"] .chip.on { color: #fff; }
html[data-theme="dark"] .top { background: rgba(17, 16, 24, 0.82); border-color: #2a2836; }
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .chip { border-color: #2e2c3c; }
html[data-theme="dark"] .guide-card, html[data-theme="dark"] .stat-tile { background: #1b1a24; border-color: #2e2c3c; color: #ecebf3; }
html[data-theme="dark"] .guide-card strong { color: #a996ff; }
html[data-theme="dark"] .stat-tile.warn { background: #3a1820; border-color: #5c2633; }
html[data-theme="dark"] .stat-label, html[data-theme="dark"] .meta-line, html[data-theme="dark"] .rule-n, html[data-theme="dark"] html[data-theme="dark"] .transcript { background: #111018; }
html[data-theme="dark"] .topic-card:hover, html[data-theme="dark"] .guide-card:hover, html[data-theme="dark"] .stat-tile:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] body { color: #ecebf3; background: #111018; }
html[data-theme="dark"] a { color: #a996ff; }
html[data-theme="dark"] .top, html[data-theme="dark"] .card, html[data-theme="dark"] .msg, html[data-theme="dark"] .features li, html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=password], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .prefix { background: #1b1a24; border-color: #2e2c3c; color: #ecebf3; }
html[data-theme="dark"] .brand, html[data-theme="dark"] .top nav a { color: #ecebf3; }
html[data-theme="dark"] .brand span { color: #a996ff; }
html[data-theme="dark"] .hint, html[data-theme="dark"] .msg-meta, html[data-theme="dark"] .stat, html[data-theme="dark"] .empty, html[data-theme="dark"] .handle, html[data-theme="dark"] .counter, html[data-theme="dark"] .prefix span, html[data-theme="dark"] .link-btn, html[data-theme="dark"] .foot, html[data-theme="dark"] .foot a { color: #9d99b3; }
html[data-theme="dark"] .hero p { color: #c4c0d6; }
html[data-theme="dark"] .secret { background: #111018; }
html[data-theme="dark"] .secret.name { border-color: #2e2c3c; }
html[data-theme="dark"] .msg-actions, html[data-theme="dark"] .session { border-color: #2a2836; }
html[data-theme="dark"] .alert.error { background: #3a1820; color: #ffc7d1; border-color: #5c2633; }
html[data-theme="dark"] .alert.ok { background: #13301f; color: #bdf0d2; border-color: #1f4a31; }
html[data-theme="dark"] .alert.info { background: #221c45; color: #d8d0ff; border-color: #352c6b; }
html[data-theme="dark"] .btn.ghost:hover, html[data-theme="dark"] .btn.ghost:focus { background: #221c45; color: #c9bdff; }
html[data-theme="dark"] .badge { background: #221c45; color: #c9bdff; }
html[data-theme="dark"] .chat-head, html[data-theme="dark"] .friend-meter, html[data-theme="dark"] .bubble.theirs, html[data-theme="dark"] .dots, html[data-theme="dark"] .emoji { background: #1b1a24; border-color: #2e2c3c; color: #ecebf3; }
html[data-theme="dark"] .composer { background: #111018; }
html[data-theme="dark"] .bubble.system { background: #221c45; color: #d8d0ff; }
html[data-theme="dark"] .chat-item { border-color: #2a2836; }
html[data-theme="dark"] .chat-item.unread .chat-item-last { color: #ecebf3; }
html[data-theme="dark"] .chat-item-last, html[data-theme="dark"] .chat-item-time, html[data-theme="dark"] .seen, html[data-theme="dark"] .typing, html[data-theme="dark"] .section-title, html[data-theme="dark"] .ad-label { color: #9d99b3; }
html[data-theme="dark"] .seen.is-seen { color: #a996ff; }
html[data-theme="dark"] .connect-choice { background: #111018; }
html[data-theme="dark"] progress, html[data-theme="dark"] progress::-webkit-progress-bar { background: #221c45; }
html[data-theme="dark"] hr, html[data-theme="dark"] .menu-section { border-color: #2a2836; }
html[data-theme="dark"] .eyebrow { color: #a996ff; }
html[data-theme="dark"] .lead { color: #c4c0d6; }
html[data-theme="dark"] .topic-card, html[data-theme="dark"] .question-list li { background: #1b1a24; border-color: #2e2c3c; }
html[data-theme="dark"] .cta-card { background: #221c45; border-color: #352c6b; }
html[data-theme="dark"] .faq { border-color: #2a2836; }
html[data-theme="dark"] .link-preview { background: #221c45; }
html[data-theme="dark"] .link-preview strong { color: #d8d0ff; }
html[data-theme="dark"] .change-username summary { color: #a996ff; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
  html:not([data-theme="light"]) .tabbar { background: rgba(17, 16, 24, 0.9); border-color: #2a2836; box-shadow: none; }
  html:not([data-theme="light"]) .tabbar a { color: #9d99b3; }
  html:not([data-theme="light"]) .tabbar a.on { color: #c9bdff; background: #221c45; }
  html:not([data-theme="light"]) .credit-pill { background: #221c45; color: #d8d0ff !important; }
  html:not([data-theme="light"]) .top-links a.on { color: #a996ff; }
  html:not([data-theme="light"]) .seg { background: #221c45; }
  html:not([data-theme="light"]) .toast { background: #ecebf3; color: #17151f; }
  html:not([data-theme="light"]) a.btn:not(.ghost), html:not([data-theme="light"]) .top nav .nav-cta, html:not([data-theme="light"]) .admin-nav a.on, html:not([data-theme="light"]) .chip.on { color: #fff; }
  html:not([data-theme="light"]) .top { background: rgba(17, 16, 24, 0.82); border-color: #2a2836; }
  html:not([data-theme="light"]) .theme-toggle, html:not([data-theme="light"]) .chip { border-color: #2e2c3c; }
  html:not([data-theme="light"]) .guide-card, html:not([data-theme="light"]) .stat-tile { background: #1b1a24; border-color: #2e2c3c; color: #ecebf3; }
  html:not([data-theme="light"]) .guide-card strong { color: #a996ff; }
  html:not([data-theme="light"]) .stat-tile.warn { background: #3a1820; border-color: #5c2633; }
  html:not([data-theme="light"]) .stat-label, html:not([data-theme="light"]) .meta-line, html:not([data-theme="light"]) .rule-n, html:not([data-theme="light"])   html:not([data-theme="light"]) .transcript { background: #111018; }
  html:not([data-theme="light"]) .topic-card:hover, html:not([data-theme="light"]) .guide-card:hover, html:not([data-theme="light"]) .stat-tile:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
  html:not([data-theme="light"]) body { color: #ecebf3; background: #111018; }
  html:not([data-theme="light"]) a { color: #a996ff; }
  html:not([data-theme="light"]) .top, html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .msg, html:not([data-theme="light"]) .features li, html:not([data-theme="light"]) input[type=text], html:not([data-theme="light"]) input[type=password], html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select, html:not([data-theme="light"]) .prefix { background: #1b1a24; border-color: #2e2c3c; color: #ecebf3; }
  html:not([data-theme="light"]) .brand, html:not([data-theme="light"]) .top nav a { color: #ecebf3; }
  html:not([data-theme="light"]) .brand span { color: #a996ff; }
  html:not([data-theme="light"]) .hint, html:not([data-theme="light"]) .msg-meta, html:not([data-theme="light"]) .stat, html:not([data-theme="light"]) .empty, html:not([data-theme="light"]) .handle, html:not([data-theme="light"]) .counter, html:not([data-theme="light"]) .prefix span, html:not([data-theme="light"]) .link-btn, html:not([data-theme="light"]) .foot, html:not([data-theme="light"]) .foot a { color: #9d99b3; }
  html:not([data-theme="light"]) .hero p { color: #c4c0d6; }
  html:not([data-theme="light"]) .secret { background: #111018; }
  html:not([data-theme="light"]) .secret.name { border-color: #2e2c3c; }
  html:not([data-theme="light"]) .msg-actions, html:not([data-theme="light"]) .session { border-color: #2a2836; }
  html:not([data-theme="light"]) .alert.error { background: #3a1820; color: #ffc7d1; border-color: #5c2633; }
  html:not([data-theme="light"]) .alert.ok { background: #13301f; color: #bdf0d2; border-color: #1f4a31; }
  html:not([data-theme="light"]) .alert.info { background: #221c45; color: #d8d0ff; border-color: #352c6b; }
  html:not([data-theme="light"]) .btn.ghost:hover, html:not([data-theme="light"]) .btn.ghost:focus { background: #221c45; color: #c9bdff; }
  html:not([data-theme="light"]) .badge { background: #221c45; color: #c9bdff; }
  html:not([data-theme="light"]) .chat-head, html:not([data-theme="light"]) .friend-meter, html:not([data-theme="light"]) .bubble.theirs, html:not([data-theme="light"]) .dots, html:not([data-theme="light"]) .emoji { background: #1b1a24; border-color: #2e2c3c; color: #ecebf3; }
  html:not([data-theme="light"]) .composer { background: #111018; }
  html:not([data-theme="light"]) .bubble.system { background: #221c45; color: #d8d0ff; }
  html:not([data-theme="light"]) .chat-item { border-color: #2a2836; }
  html:not([data-theme="light"]) .chat-item.unread .chat-item-last { color: #ecebf3; }
  html:not([data-theme="light"]) .chat-item-last, html:not([data-theme="light"]) .chat-item-time, html:not([data-theme="light"]) .seen, html:not([data-theme="light"]) .typing, html:not([data-theme="light"]) .section-title, html:not([data-theme="light"]) .ad-label { color: #9d99b3; }
  html:not([data-theme="light"]) .seen.is-seen { color: #a996ff; }
  html:not([data-theme="light"]) .connect-choice { background: #111018; }
  html:not([data-theme="light"]) progress, html:not([data-theme="light"]) progress::-webkit-progress-bar { background: #221c45; }
  html:not([data-theme="light"]) hr, html:not([data-theme="light"]) .menu-section { border-color: #2a2836; }
  html:not([data-theme="light"]) .eyebrow { color: #a996ff; }
  html:not([data-theme="light"]) .lead { color: #c4c0d6; }
  html:not([data-theme="light"]) .topic-card, html:not([data-theme="light"]) .question-list li { background: #1b1a24; border-color: #2e2c3c; }
  html:not([data-theme="light"]) .cta-card { background: #221c45; border-color: #352c6b; }
  html:not([data-theme="light"]) .faq { border-color: #2a2836; }
  html:not([data-theme="light"]) .link-preview { background: #221c45; }
  html:not([data-theme="light"]) .link-preview strong { color: #d8d0ff; }
  html:not([data-theme="light"]) .change-username summary { color: #a996ff; }
}

/* ---------------------------------------------------------------- sharing */
.share-hero { margin: 12px 0 8px; }
.btn.share-ig { width: 100%; background: #e5304f; border-color: transparent; background-image: linear-gradient(45deg, #f9a825 0%, #e5304f 45%, #b42fd8 100%); color: #fff; }
.btn.share-ig:hover { box-shadow: 0 8px 22px rgba(229, 48, 79, 0.35); }
.js-only-block { display: none; }
.js .js-only-block { display: block; }
.share-row { margin: 6px -2px 10px; }
.share-row .chip { margin: 3px 2px; }
.js .share-row .chip.js-only { display: inline-block; }
.toast { position: fixed; left: 50%; bottom: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 92%; background: #17151f; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 50; -webkit-animation: drop 0.3s ease-out both; animation: drop 0.3s ease-out both; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.toast.hide { opacity: 0; }

/* ---------------------------------------------------------------- random chat */
.seg { display: -webkit-box; display: -webkit-flex; display: flex; background: #efebff; border-radius: 14px; padding: 4px; }
.seg label { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0; text-align: center; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: 12px 6px; border-radius: 11px; font-weight: 700; -webkit-transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s; }
.seg input:checked + span { background: #5b3df5; color: #fff; box-shadow: 0 4px 12px rgba(91, 61, 245, 0.3); }
.seg input:focus + span { outline: 2px solid #5b3df5; outline-offset: 2px; }
.searching { text-align: center; padding-top: 36px; }
.radar { position: relative; width: 140px; height: 140px; margin: 0 auto 18px; }
.radar b { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 44px; }
.radar span { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; border: 3px solid #5b3df5; opacity: 0; -webkit-animation: ping 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; animation: ping 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.radar span:nth-child(2) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.radar span:nth-child(3) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
@-webkit-keyframes ping { 0% { -webkit-transform: scale(0.3); opacity: 0.9; } 100% { -webkit-transform: scale(1.1); opacity: 0; } }
@keyframes ping { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.1); opacity: 0; } }
.searching.found .radar span { border-color: #13a37f; }
.searching.found .radar b { -webkit-animation: pop 0.4s ease-out; animation: pop 0.4s ease-out; }
.next-btn { margin-left: 8px; white-space: nowrap; }
.ended { text-align: center; }

/* ---------------------------------------------------------------- app bar + bottom tab bar */
.ico { display: inline-block; margin-right: 8px; }
.chip .ico { margin-right: 6px; }
.credit-pill { background: #efebff; color: #33228f !important; border-radius: 999px; padding: 6px 12px !important; font-weight: 700; font-size: 14px; white-space: nowrap; }
.top-links { display: none; }
.top-links a { position: relative; }
.top-links a.on { color: #5b3df5; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 16;
  display: -webkit-box; display: -webkit-flex; display: flex;
  background: #fff; border-top: 1px solid #e7e4f2;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(23, 21, 31, 0.06);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tabbar { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
}
.tabbar a { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; text-align: center; text-decoration: none; color: #6b6780; padding: 4px 0; border-radius: 12px; -webkit-transition: color 0.2s, background-color 0.2s; transition: color 0.2s, background-color 0.2s; }
.tabbar a.on { color: #5b3df5; background: #efebff; }
.tab-ico { position: relative; display: block; font-size: 22px; line-height: 28px; }
.tab-ico .nav-badge { position: absolute; top: -2px; left: 50%; margin-left: 6px; }
.tab-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; }
.has-tabs main.wrap { padding-bottom: 96px; }
.has-tabs .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.has-tabs .cookie { bottom: calc(64px + env(safe-area-inset-bottom)); }
.has-tabs .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Wider screens: links in the app bar, no bottom bar. */
@media (min-width: 700px) {
  .top-links { display: inline; }
  .tabbar { display: none; }
  .has-tabs main.wrap { padding-bottom: 48px; }
  .has-tabs .foot { padding-bottom: 24px; }
  .has-tabs .cookie { bottom: 0; }
}

.credit-pill .ico { margin-right: 5px; }