/* CHAINeS identity shared by the feed, account pages, and connected experiences. */
:root:root {
  --bg: #091427; --panel: #101d35; --fg: #eef3ff; --muted: #acb9d0;
  --accent: #76b9eb; --accent-2: #e5b35c; --gold: #e5b35c; --gold-2: #f5d48b;
  --lining: #344765; --border: #344765; --card: #101d35; --text: #eef3ff;
  --shadow: 0 12px 32px #0003;
  color-scheme: dark;
}
:root[data-theme='light']:root {
  --bg: #f1f5fa; --panel: #ffffff; --fg: #15243d; --text: #15243d;
  --muted: #52627b; --accent: #245b88; --accent-2: #9b681c;
  --lining: #c6d1df; --border: #c6d1df; --card: #ffffff;
  color-scheme: light;
}
body { background: radial-gradient(ellipse at 0 0, #16395a33, transparent 65%), var(--bg); color: var(--fg); }
body header, .profile-header, .marketplace-header {
  background: linear-gradient(120deg, #142d52, #091427) !important;
  color: #eef3ff; border-color: #344765 !important; box-shadow: 0 12px 32px #0003;
}
header .toolbar, header .const-buttons { background: #101d35 !important; border-color: #344765 !important; }
header .chip { background: #172945; color: #eef3ff; border-color: #425675; }
header .brand, header a { color: #eef3ff; }
.feed, .bubble, .post-card, .section-card, .marketplace-card { border-color: var(--lining); box-shadow: 0 8px 24px #0002; }
.msg.mine .bubble { background: color-mix(in srgb, var(--panel), #76b9eb 10%); border-color: #567c9e; }
.post-actions { background: var(--panel); border-color: var(--lining); }
.btn.primary, .send, .install-app-btn { background: linear-gradient(110deg, #e5b35c, #f5d48b) !important; color: #172238 !important; border: 1px solid #f5d48b !important; }

:root:root { --line: #344765; --panel-strong: #172945; --bg2: #101d35; }
:root[data-theme='light']:root { --line: #c6d1df; --panel-strong: #e9eff7; --bg2: #e9eff7; }
body footer { background: var(--panel); color: var(--fg); border-color: var(--lining); }
footer .chip { background: var(--panel); color: var(--fg); border-color: var(--lining); }
.brand-mark, header .logo, header .mark { background: transparent !important; box-shadow: none !important; }
header .logo img { object-fit: contain; }
/* Glossy blue controls around the unchanged silver-and-gold master logo. */
body header, .profile-header, .marketplace-header { background: linear-gradient(120deg, #06265d, #0756b7 65%, #007fac) !important; border-color: #5ccfff66 !important; box-shadow: inset 0 1px 0 #cceeff44, 0 12px 30px #002b6a55; }
header .toolbar, header .const-buttons { background: linear-gradient(180deg, #123966cc, #071d3dcc) !important; border-color: #71cfff55 !important; }
header .chip, footer .chip { background: linear-gradient(180deg, #153c69, #0a2448); border-color: #58bfff66; color: #eef7ff; box-shadow: inset 0 1px 0 #b5eaff22; }
header .chip:hover, footer .chip:hover { background: linear-gradient(180deg, #1a5088, #0e3262); border-color: #79deff; }
header .chip img, footer .chip img { filter: drop-shadow(0 1px 4px #0072ff66); }
img[src$='/logo.svg'] { filter: none !important; }
.btn.primary, .send, .install-app-btn { background: linear-gradient(120deg, #0072ff, #00bfff) !important; border-color: #7edfff !important; color: #fff !important; box-shadow: inset 0 1px 0 #ffffff55, 0 5px 16px #0072ff33; }
.install-app-btn, #auth-install-app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.install-app-btn[hidden], #auth-install-app-btn[hidden], #footer-install-app-btn[hidden] { display: none !important; }
.install-app-btn img, #auth-install-app-btn img { flex-shrink: 0; border-radius: 6px; }
#footer-install-app-btn { min-width: 38px; cursor: pointer; }
footer .status.bottom { gap: 5px; }
@media(max-width:560px) { .install-app-btn { gap: 5px; padding: 6px 8px; } .install-app-btn img { width: 20px; height: 20px; } #footer-install-app-btn img { width: 22px; height: 22px; } }
footer .status.bottom:has(#footer-install-app-btn:not([hidden])) { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Settings for the updated login; the original installer remains in use. */
.brand-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 22px; border: 1px solid #56708f; border-radius: 20px; background: #101d35; color: #eef3ff; overflow-y: auto; box-sizing: border-box; font: 14px/1.6 system-ui, sans-serif; }
.brand-dialog::backdrop { background: #020813cc; backdrop-filter: blur(5px); }
.brand-dialog__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-dialog h2 { font-size: 20px; margin: 0; }
.brand-dialog p { color: #acb9d0; }
.brand-dialog button { min-height: 40px; padding: 8px 12px; border: 1px solid #56708f; border-radius: 9px; background: #172945; color: #eef3ff; cursor: pointer; }
.brand-dialog summary { cursor: pointer; padding: 10px 0; }
.brand-dialog input { max-width: 100%; }
.brand-dialog .face-login { margin-top: 14px; padding: 12px; border: 1px solid #56708f; background: #091427; box-shadow: none; }
.brand-dialog .face-login::before { display: none; }
.brand-dialog .face-login__stage { min-height: 0; height: 160px; }
.brand-dialog .face-login__preview { height: 160px; max-height: 160px; }
.brand-dialog .face-login__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-dialog .face-login__actions button { flex: 1; }
.brand-dialog .face-login__status { font-size: 12px; line-height: 1.5; }
.brand-dialog .auth-help { font-size: 12px; }
.brand-dialog .auth-profile input { display: block; }
.brand-dialog .privacy-choice__actions { display: grid; gap: 8px; }
.brand-dialog .face-login__reticle::after { content: 'LIVE CAMERA SCAN'; }
.brand-dialog .face-login__badge { box-shadow: none; color: #f5d48b; }
.brand-dialog button:focus-visible, .brand-dialog summary:focus-visible { outline: 2px solid #f5d48b; outline-offset: 3px; }
@media (max-width: 560px) {
  .brand-dialog { padding: 16px; }
  .brand-dialog__heading { align-items: start; }
  .brand-dialog h2 { font-size: 18px; }
  .brand-dialog .face-login { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .brand-dialog .face-login > * { grid-column: 1; grid-row: auto; }
  .brand-dialog .face-login__stage { width: 100%; aspect-ratio: auto; }
  .brand-dialog .face-login__metric { grid-template-columns: 85px 1fr 40px; font-size: 11px; }
  .brand-dialog .face-login__actions { flex-wrap: wrap; }
  .brand-dialog .face-login__actions .btn { font-size: 12px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .brand-dialog *, .brand-dialog *::before { animation: none !important; } }
.brand-dialog [aria-pressed='true'] { border-color: #f5d48b; background: #e5b35c; color: #15243d; }
.brand-dialog .auth-privacy h3 { font-size: 14px; }
.brand-dialog__heading { position: sticky; top: -22px; padding: 12px 0; background: #101d35; z-index: 2; }
.brand-dialog .face-login__actions .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .brand-dialog__heading { top: -16px; } }
.brand-dialog .face-login__reticle { border-color: #e5b35c; box-shadow: 0 0 16px #e5b35c33; }
.brand-dialog .face-login__bar span { background: linear-gradient(90deg, #76b9eb, #f5d48b); box-shadow: none; }
.brand-dialog .face-login__capture { color: #eef3ff; border-color: #56708f; }
/* Preserve the pre-update mobile header geometry from 1a351dc. */
@media (max-width: 600px) {
  header #install-app-btn:not([data-native-install="ready"]) { display: none !important; }
}

/* Retain the current desktop layout. */
@media (min-width: 601px) {
/* Fit the existing header controls instead of allowing them to collide. */
body header { flex-wrap: wrap; }
header > .bar { flex: 1 1 440px; width: auto; min-width: 0; flex-wrap: wrap; gap: 8px; }
header .bar > .brand { flex: 1 1 180px; min-width: 0; }
header .brand .logo { flex-shrink: 0; }
header .brand-lockup { min-width: 0; }
header .brand h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header .bar-right { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; gap: 6px; max-width: 100%; }
header > #toolbar-shell { flex: 1 1 440px; width: auto; min-width: 0; }
header .toolbar { flex-wrap: wrap; gap: 6px; }
header .toolbar-primary { flex: 1 1 220px; flex-wrap: wrap; overflow: visible; min-width: 0; gap: 6px; }
header .toolbar-primary .chip { flex: 0 0 auto; min-width: 36px; }
header .toolbar-additional-desktop { flex: 0 1 auto; flex-wrap: wrap; gap: 6px; }
header .toolbar-additional-desktop:empty { display: none; }
header .toolbar-overflow-panel { max-width: min(320px, calc(100vw - 32px)); }
@media(max-width:1279px) { header .brand-signals { display: none; } }
@media(max-width:760px) {
  header .self-destruct { display: none; }
  header .brand-kicker { display: none; }
  header .brand h1 { font-size: 14px; }
  header .bar-right { gap: 5px; }
  header .toolbar-primary { flex-basis: 180px; }
  header .toolbar .chip { min-height: 36px; }
}
@media(max-width:380px) {
  header .bar > .brand { flex-basis: 145px; }
  header .install-app-btn { font-size: 10px; }
  header .install-app-btn img { width: 18px; height: 18px; }
  header .toolbar-primary { gap: 4px; }
}
@media(max-width:900px) {
  header > .bar, header > #toolbar-shell { flex: 0 0 auto; width: 100%; }
  header .bar { flex-direction: row; align-items: center; }
}

/* Restore the complete mobile toolbar with the original blue panel treatment. */
body header, .profile-header, .marketplace-header {
  background: linear-gradient(145deg, #101a39, #0c1430) !important;
  border-color: #38578f !important;
  box-shadow: inset 0 1px 0 #8bbcff22, 0 0 24px #2464ff33;
}
header .toolbar, header .const-buttons {
  background: #101a35 !important; border-color: #38578f !important;
  box-shadow: inset 0 1px 0 #8bbcff22, 0 0 14px #2464ff22;
}
header .chip, footer .chip {
  background: linear-gradient(160deg, #15203f, #0e1730); border-color: #38578f;
  box-shadow: inset 0 1px 0 #9fc9ff22, 0 0 10px #2464ff22;
}
header .toolbar-overflow-panel { background: #101a35; border-color: #38578f; }
header .toolbar-overflow-list .chip { white-space: normal; }
@media (max-width: 900px) {
  header .bar { flex-wrap: nowrap; gap: 6px; }
  header .bar > .brand { flex: 1 1 0; gap: 6px; }
  header .brand .logo { width: 32px; height: 32px; }
  header .brand-kicker { display: none; }
  header .brand h1 { font-size: 14px; }
  header .bar-right { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
  header .self-destruct { display: inline-flex; align-items: center; gap: 4px; }
  header .toolbar { flex-wrap: nowrap; padding: 5px; gap: 4px; align-items: flex-start; }
  header .toolbar-primary { flex: 1 1 0; flex-wrap: wrap; gap: 4px; overflow: visible; }
  header .toolbar-primary .chip, header .toolbar-primary .chip.action-chip, header #toolbar-overflow-toggle {
    flex: 0 0 36px; width: 36px; min-width: 36px; height: 44px; min-height: 44px; padding: 0;
  }
  header #conn-chip #conn-label { display: none; }
  header #feed-btn, header .toolbar-primary .mobile-only-chip { display: flex !important; }
  header .toolbar-overflow { margin-right: 0; }
  header .toolbar-overflow-panel { max-height: min(60dvh, 420px); overscroll-behavior: contain; }
  header #logout-btn { width: 36px; min-width: 36px; height: 40px; padding: 0; }
}
@media (max-width: 600px) {
  header .install-app-btn { width: 36px; min-width: 36px; height: 40px; padding: 0; justify-content: center; }
  header .install-app-btn span, header .self-destruct span { display: none; }
  header .install-app-btn img { width: 24px; height: 24px; }
  header .self-destruct { width: 24px; min-height: 44px; justify-content: center; }
  header .self-destruct input { margin: 0; width: 20px; height: 20px; accent-color: #36a9ff; }
}
@media (max-width: 600px) {
  header .self-destruct { flex-direction: column; gap: 1px; }
  header .self-destruct::after { content: '5m'; font-size: 9px; line-height: 1; color: #b8cbee; }
}

}

body header, .profile-header, .marketplace-header {
  background: linear-gradient(145deg, #101a39, #0c1430) !important;
  border-color: #38578f !important;
  box-shadow: inset 0 1px 0 #8bbcff22, 0 0 24px #2464ff33;
}
header .toolbar, header .const-buttons {
  background: #101a35 !important; border-color: #38578f !important;
  box-shadow: inset 0 1px 0 #8bbcff22, 0 0 14px #2464ff22;
}
header .chip, footer .chip {
  background: linear-gradient(160deg, #15203f, #0e1730); border-color: #38578f;
  box-shadow: inset 0 1px 0 #9fc9ff22, 0 0 10px #2464ff22;
}
header .toolbar-overflow-panel { background: #101a35; border-color: #38578f; }
header .toolbar-overflow-list .chip { white-space: normal; }

/* Filled mobile controls and full-height, scrollable Cloud Links panels. */
@media (max-width: 600px) {
  header .chip, footer .chip, .composer-panel-btn {
    background: linear-gradient(145deg, #193e91, #112955);
    border-color: #4976bd;
    box-shadow: inset 0 1px 0 #b6dfff33, 0 2px 10px #1456cc33;
  }
  header .chip:hover, footer .chip:hover, header .chip:focus-visible,
  footer .chip:focus-visible { background: linear-gradient(145deg, #245ac2, #163a7d); border-color: #64cfff; }
  header .chip[aria-pressed="true"], footer .chip[aria-pressed="true"],
  #broadcast-btn { background: linear-gradient(145deg, #267aff, #2440b7); border-color: #64cfff; }
  header .toolbar-primary .chip img, footer .chip img {
    filter: drop-shadow(0 0 4px #00bfff66);
  }
  header .toolbar-overflow-panel {
    width: min(340px, calc(100vw - 48px)); min-width: 0;
    max-width: calc(100vw - 48px); max-height: min(66dvh, 560px);
    padding: 10px; background: #101b38; border: 1px solid #4976bd;
    box-shadow: 0 8px 28px #02081dcc, 0 0 18px #2165ff33;
    overscroll-behavior: contain;
  }
  header .toolbar-overflow-group { width: 100%; border-color: #38578f; background: #101a35; padding: 8px; }
  header .toolbar-overflow-group summary { color: #9fceff; font-size: 14px; padding: 4px 0; }
  header .toolbar-overflow-list { gap: 8px; }
  header .toolbar-overflow-list .chip { min-height: 44px; width: 100%; white-space: normal; }
  header .toolbar-overflow-list .chip img { width: 26px; height: 26px; flex-shrink: 0; }
  header .toolbar-overflow-list .menu-link-copy { flex: 1; }
  .composer .send { background: linear-gradient(145deg, #245ee8, #253fba) !important; border-color: #4776d6 !important; }
  .composer, .bubble, .post-actions { border-color: #38578f; box-shadow: 0 0 16px #2165ff22; }
}

/* Reference header: navy frame, full identity row and seven large shortcuts. */
body header {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: 14px;
  background: #101832 !important; border: 1px solid #38578f !important; border-radius: 20px;
  box-shadow: inset 0 1px 0 #9fc9ff22, 0 0 24px #2464ff33;
}
header > .bar, header > #toolbar-shell { flex: 0 0 auto; width: 100%; }
header .bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
header .bar > .brand { flex: 1 1 0; min-width: 0; gap: 10px; }
header .brand .logo { width: 42px; height: 42px; flex-shrink: 0; }
header .brand-lockup { min-width: 0; }
header .brand h1 { font-size: 22px; letter-spacing: 0; white-space: nowrap; }
header .brand-kicker, header .brand-signals { display: none; }
header .bar-right { flex: 0 0 auto; flex-wrap: nowrap; gap: 10px; margin-left: 0; }
header .self-destruct { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; min-height: 44px; font-size: 16px; white-space: nowrap; }
header .self-destruct::after { content: none; }
header .self-destruct input { width: 22px; height: 22px; margin: 0; accent-color: #38aaff; }
header #logout-btn { width: 48px; min-width: 48px; height: 48px; padding: 0; }
header .toolbar { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px; border-radius: 20px; background: #101832 !important; }
header .toolbar-overflow { flex: 0 0 56px; margin: 0; }
header #toolbar-overflow-toggle { width: 56px; min-width: 56px; height: 56px; padding: 0; }
header .toolbar-primary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1 1 0; gap: 8px; min-width: 0; overflow: visible; }
header .toolbar-primary .chip, header .toolbar-primary .chip.action-chip {
  display: flex !important; width: 100%; min-width: 0; max-width: none; height: 56px; min-height: 56px; padding: 0; border-radius: 16px;
}
header .toolbar-primary .chip img { width: 32px; height: 32px; object-fit: contain; }
header .chip { background: linear-gradient(145deg, #14203e, #0d152c); border-color: #38578f; box-shadow: inset 0 1px 0 #9fc9ff22, 0 0 10px #2464ff22; }
header .toolbar-additional-desktop { display: none; }
header .toolbar-overflow-panel #conn-label { display: inline; }
header .toolbar-overflow-panel #conn-chip, header .toolbar-overflow-panel #ghost-btn { width: 100%; min-height: 44px; justify-content: flex-start; padding: 6px 10px; }
@media (max-width: 900px) {
  body header { gap: 10px; padding: 10px; }
  header .bar { gap: 4px; }
  header .bar > .brand { gap: 6px; }
  header .brand .logo { width: 32px; height: 32px; }
  header .brand h1 { font-size: 14px; }
  header .bar-right { gap: 5px; }
  header #install-app-btn { display: none !important; }
  header .self-destruct { gap: 4px; font-size: 11px; }
  header .self-destruct input { width: 18px; height: 18px; }
  header #logout-btn { width: 34px; min-width: 34px; height: 44px; }
  header .toolbar { gap: 4px; padding: 5px; border-radius: 16px; }
  header .toolbar-overflow { flex-basis: 36px; }
  header #toolbar-overflow-toggle { width: 36px; min-width: 36px; height: 44px; }
  header .toolbar-primary { gap: 4px; }
  header .toolbar-primary .chip, header .toolbar-primary .chip.action-chip { height: 44px; min-height: 44px; border-radius: 12px; }
  header .toolbar-primary .chip img { width: min(28px, 100%); height: 28px; }
}
@media (max-width: 380px) {
  header .brand .logo { width: 26px; height: 26px; }
  header .brand h1 { font-size: 11px; }
  header .self-destruct { font-size: 9px; }
  header .toolbar-primary { gap: 3px; }
}
header .toolbar-overflow-panel #ghost-btn { font-size: 12px; gap: 8px; }
@media (min-width: 901px) {
  header .toolbar-primary { max-width: 560px; }
}

/* The first header shortcut switches the actual live transport. */
header .toolbar-primary #conn-chip { position: relative; }
header .toolbar-primary #conn-label { display: none; }
header .toolbar-primary #conn-chip[aria-pressed="true"] { background: linear-gradient(145deg, #145d99, #103965); border-color: #43ceff; }
header .header-live-count { position: absolute; top: 2px; right: 2px; min-width: 13px; padding: 0 2px; border-radius: 6px; background: #70e4ff; color: #071b38; font-size: 9px; line-height: 13px; font-weight: 800; }
header .header-live-count[hidden] { display: none; }
header .toolbar-overflow-panel #feed-btn { width: 100%; min-height: 44px; height: auto; padding: 6px 10px; justify-content: flex-start; font-size: 12px; gap: 8px; }
header .toolbar-overflow-panel #feed-btn { display: flex; }

/* Index dock: the same navy frame and outlined controls as the header. */
.chaines-index footer .status.bottom {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  align-items: stretch; gap: 6px; padding: 7px; border: 1px solid #38578f;
  border-radius: 18px; background: #101832; box-shadow: inset 0 1px 0 #9fc9ff22, 0 0 18px #2464ff22;
}
.chaines-index footer .status.bottom > [hidden] { display: none !important; }
.chaines-index footer .status.bottom .chip {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 3px; width: 100%; min-width: 0; min-height: 52px;
  padding: 7px 4px; border: 1px solid #38578f; border-radius: 12px;
  background: linear-gradient(145deg, #14203e, #0d152c); color: #eef3ff;
  box-shadow: inset 0 1px 0 #9fc9ff22, 0 0 10px #2464ff22; text-decoration: none;
}
.chaines-index footer .status.bottom .chip:hover,
.chaines-index footer .status.bottom .chip:focus-visible { border-color: #64cfff; background: #19325b; }
.chaines-index footer .status.bottom .chip img { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; }
.chaines-index footer .status.bottom #live-count,
.chaines-index footer .status.bottom #notif-dot,
.chaines-index footer .status.bottom .verified-badge {
  position: absolute; top: 3px; right: 3px; margin: 0; padding: 0 3px;
  min-width: 14px; max-width: calc(100% - 6px); border-radius: 7px;
  font-size: 10px; font-weight: 800; line-height: 15px; color: #071b38; background: #70e4ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chaines-index footer #notif-dot:empty { display: none; }
.chaines-index footer .footer-notif-wrap { position: relative; display: flex; min-width: 0; }
.chaines-index footer #notif-panel { max-width: min(340px, calc(100vw - 24px)); }
.chaines-index footer #profile-link:has(#profile-pic[hidden])::before {
  content: ''; display: block; width: 24px; height: 24px; flex-shrink: 0;
  background: url('/static/brand/v2/user.svg') center / contain no-repeat;
}
.chaines-index footer .status.bottom #profile-name {
  max-width: 100%; min-width: 0; font-size: 10px; line-height: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chaines-index footer #go-live-all-btn { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
/* Readable post cards, flexible metadata and reactions that stay in their card. */
.chaines-index .feed { padding: 18px; }
.chaines-index .msg { gap: 12px; margin-bottom: 18px; }
.chaines-index .avatar { flex: 0 0 36px; }
.chaines-index .bubble { padding: 16px; border-radius: 18px; background: #101d35; border-color: #38578f; box-shadow: 0 5px 18px #02081d33; }
.chaines-index .meta { flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; line-height: 1.5; }
.chaines-index .who { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.chaines-index .msg-text { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.chaines-index .bubble img, .chaines-index .bubble video { max-width: 100%; }
.chaines-index .post-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; background: #0d1830; border-color: #344d77; }
.chaines-index .post-actions .reaction-btn { flex: 0 1 auto; min-width: 36px; min-height: 36px; padding: 6px 9px; }
.chaines-index .bubble input, .chaines-index .bubble textarea { max-width: 100%; min-width: 0; border-radius: 10px; }
.chaines-index .bubble :is(button, input, textarea):focus-visible,
.chaines-index footer .chip:focus-visible { outline: 2px solid #64cfff; outline-offset: 2px; }
@media (max-width: 600px) {
  .chaines-index footer .status.bottom { grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); gap: 4px; padding: 5px; }
  .chaines-index footer .status.bottom .chip { min-height: 52px; padding: 5px 2px; border-radius: 10px; }
  .chaines-index footer .status.bottom .chip img { width: 23px; height: 23px; }
  .chaines-index .feed { padding: 10px; }
  .chaines-index .msg { gap: 7px; margin-bottom: 14px; }
  .chaines-index .avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; border-radius: 9px; }
  .chaines-index .bubble { padding: 12px; border-radius: 15px; }
  .chaines-index .msg-text { font-size: 13px; }
  .chaines-index .post-actions { gap: 4px; padding: 5px; }
}
.chaines-index footer .status.bottom #notif-bell,
.chaines-index footer .status.bottom #footer-install-app-btn { min-width: 0; }
.chaines-index footer .status.bottom #profile-name { position: absolute; bottom: 3px; left: 3px; right: 3px; }
.chaines-index footer #profile-link::before,
.chaines-index footer #profile-pic { transform: translateY(-5px); }

/* Desktop stays on one row; mobile retains the two-row reference layout. */
@media (min-width: 901px) {
  .chaines-index header { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto; flex-direction: row; align-items: center; padding: 10px; gap: 12px; }
  .chaines-index header > .bar { width: auto; flex: 0 0 auto; gap: 12px; }
  .chaines-index header > #toolbar-shell { width: auto; flex: 1 1 0; min-width: 0; }
  .chaines-index header .bar > .brand { flex: 0 0 auto; gap: 8px; }
  .chaines-index header .brand .logo { width: 36px; height: 36px; }
  .chaines-index header .brand h1 { font-size: clamp(14px, 1.4vw, 22px); }
  .chaines-index header .bar-right { gap: 8px; }
  .chaines-index header .self-destruct { font-size: clamp(11px, 1vw, 16px); }
  .chaines-index header .self-destruct input { width: 18px; height: 18px; }
  .chaines-index header #logout-btn { width: 44px; min-width: 44px; height: 44px; }
  .chaines-index header .install-app-btn { min-height: 44px; padding: 6px 10px; border-radius: 12px; }
  .chaines-index header .toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; padding: 6px; width: 100%; }
  .chaines-index header .toolbar-primary { width: 100%; max-width: none; gap: 6px; }
  .chaines-index header #toolbar-overflow-toggle { width: 44px; min-width: 44px; height: 44px; }
  .chaines-index header .toolbar-primary #conn-chip { width: 100%; min-width: 0; max-width: none; }
  .chaines-index header .toolbar-primary .chip { height: 44px; min-height: 44px; border-radius: 12px; }
  .chaines-index header .toolbar-primary .chip img { width: 28px; height: 28px; }
  .chaines-index header .toolbar-overflow-panel { left: auto; right: 0; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .chaines-index header { gap: 8px; }
  .chaines-index header > .bar { gap: 8px; }
  .chaines-index header .bar-right { gap: 6px; }
  .chaines-index header .install-app-btn { width: 44px; padding: 6px; }
  .chaines-index header .install-app-btn > span { display: none; }
}
/* Explorer shares the navy frame, cyan accents, and tactile navigation. */
.marketplace-explorer .wrap { gap: 20px; }
.marketplace-explorer header.panel { align-items: stretch; gap: 16px; }
.marketplace-explorer header .brand { justify-content: flex-start; }
.marketplace-explorer header .brand-mark { width: 44px; height: 44px; padding: 0; }
.marketplace-explorer header .title { font-size: clamp(19px, 3vw, 27px); white-space: normal; }
.marketplace-explorer .top-actions { display: flex; align-items: stretch; gap: 8px; padding: 8px; border: 1px solid #38578f; border-radius: 16px; background: #0d172f; }
.marketplace-explorer :is(.top-link,.notif-btn,.market-control-bar button) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 14px; border: 1px solid #38578f; border-radius: 11px; background: linear-gradient(145deg,#14203e,#0d152c); color: #eef3ff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
.marketplace-explorer .top-actions .notif-wrap { display: flex; }
.marketplace-explorer .primary-action, .marketplace-explorer .market-control-bar button[aria-pressed='true'] { background: linear-gradient(130deg,#145a9c,#19447e); border-color: #64cfff; }
.marketplace-explorer :is(button,a,input,select,textarea):focus-visible { outline: 2px solid #64cfff; outline-offset: 3px; }
.marketplace-explorer .market-control-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 18px 22px 0; }
.marketplace-explorer :is(.category-shortcuts,.market-view-controls) { display: flex; flex-wrap: wrap; gap: 6px; }
.marketplace-explorer .tools { grid-template-columns: minmax(180px,2fr) repeat(3,minmax(120px,1fr)) auto; align-items: center; }
.marketplace-explorer .tools > * { min-width: 0; }
.marketplace-explorer .tools button, .marketplace-explorer .post-grid button { background: linear-gradient(130deg,#156cae,#1552a0); border-color: #4fa5d9; }
.marketplace-explorer button:disabled { opacity: .55; cursor: wait; }
.marketplace-explorer select:disabled { opacity: .45; }
.marketplace-explorer .live-pill[data-state='loading']::before { background: #64cfff; }
.marketplace-explorer .live-pill[data-state='offline'] { color: #ffd38b; border-color: #80602c; }
.marketplace-explorer .live-pill[data-state='offline']::before { background: #ffd38b; box-shadow: none; }
.marketplace-explorer .post-wrap { display: block; margin: 4px 22px 16px; padding: 16px; border-color: #38578f; background: #0d1830; }
.marketplace-explorer .post-wrap summary { cursor: pointer; color: #e7f1ff; font-weight: 800; min-height: 32px; }
.marketplace-explorer .post-wrap summary span { margin-left: 10px; font-size: 12px; font-weight: 400; color: #acb9d0; }
.marketplace-explorer .post-wrap[open] .post-brand { margin-top: 16px; }
.marketplace-explorer .post-grid { margin-top: 12px; }
.marketplace-explorer .grid { padding: 8px 22px 22px; grid-template-columns: repeat(auto-fill,minmax(min(100%,290px),1fr)); gap: 16px; }
.marketplace-explorer .grid[data-view='list'] { grid-template-columns: 1fr; }
.marketplace-explorer .card { border-color: #344d76; background: linear-gradient(145deg,#13213d,#101a31); padding: 18px; overflow-wrap: anywhere; }
.marketplace-explorer .card h3 { margin: 0; }
.marketplace-explorer .comment-form, .marketplace-explorer .contact-form { flex-wrap: wrap; }
.marketplace-explorer .comment-form input, .marketplace-explorer .contact-form input { min-width: 0; }
@media (max-width: 900px) {
  .marketplace-explorer .tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marketplace-explorer .tools #search { grid-column: 1/-1; }
  .marketplace-explorer .tools #refresh { grid-column: auto; }
  .marketplace-explorer .top-actions > * { flex: 1 1 140px; }
  .marketplace-explorer .notif-btn { width: 100%; }
}
@media (max-width: 600px) {
  .marketplace-explorer .wrap { padding: 12px; gap: 12px; }
  .marketplace-explorer .market-heading { flex-wrap: wrap; padding: 16px; }
  .marketplace-explorer .market-control-bar { margin: 0 16px; }
  .marketplace-explorer .tools { padding: 16px; }
  .marketplace-explorer .post-wrap { margin: 0 16px 16px; padding: 12px; }
  .marketplace-explorer .post-wrap summary span { display: block; margin: 6px 0 0; }
  .marketplace-explorer .grid { padding: 0 16px 16px; }
  .marketplace-explorer .post-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  .marketplace-explorer .tools { display: grid; }
  .marketplace-explorer #dating-match:disabled { display: none; }
  .marketplace-explorer .tools #refresh { grid-column: 1/-1; }
}
@media (max-width: 600px) {
  .marketplace-explorer .post-grid { display: grid; }
}
.chaines-index .media-playback-note { margin: 8px 0; padding: 10px; border: 1px solid #38578f; border-radius: 10px; color: #acb9d0; font-size: 12px; }
.chaines-index .archive-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border: 1px solid #38578f; border-radius: 12px; background: #101d35; }
.chaines-index .archive-status :is(button,a) { color: #76dfff; border: 1px solid #38578f; border-radius: 8px; padding: 6px 10px; background: #14203e; }

/* Cloud Links opens as a complete, viewport-positioned list. */
.chaines-index header .toolbar-overflow-panel {
  position: fixed;
  right: auto;
  width: min(560px, calc(100vw - 16px));
  min-width: 0;
  max-width: calc(100vw - 16px);
  max-height: none;
  margin: 0;
  padding: 8px;
  overflow: visible;
  box-sizing: border-box;
}
.chaines-index header .toolbar-overflow-group { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px; }
.chaines-index header .toolbar-overflow-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.chaines-index header .toolbar-overflow-list li { min-width: 0; }
.chaines-index header .toolbar-overflow-list .chip {
  height: 100%; min-height: 48px; min-width: 0; padding: 6px;
  white-space: normal; box-sizing: border-box;
}
.chaines-index header .toolbar-overflow-list .chip img { width: 24px; height: 24px; }
.chaines-index header .toolbar-overflow-list .menu-link-description { max-width: 100%; }
@media (max-width: 380px), (max-height: 500px) {
  .chaines-index header .toolbar-overflow-list .menu-link-description { display: none; }
  .chaines-index header .toolbar-overflow-list .chip { min-height: 44px; }
  .chaines-index header .toolbar-overflow-list .menu-link-title { font-size: 11px; }
}