/* THRUM / refined signal system
   A restrained, living-network surface: ink, mineral violet, soft signal green.
   This layer intentionally changes presentation only; the client logic stays intact. */
:root,
:root[data-theme] {
  color-scheme: dark !important;
  --x-void: #0c0a10;
  --x-violet: #927db5;
  --x-acid: #c4e89a;
  --x-red: #df877e;
  --x-gold: #dfbd7b;
  --x-bone: #eee8dc;
  --x-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --x-line: rgba(238, 232, 220, .11);
  --x-line-strong: rgba(238, 232, 220, .18);
  --x-panel: #17141b;
  --x-panel-raised: #1e1a23;
  --text-primary: var(--x-bone);
  --text-secondary: #aaa3ae;
  --text-tertiary: #756e7a;
  --text-primary-on: #11100f;
  --fill-primary: var(--x-acid);
  --fill-primary-on: var(--x-void);
  --fill-tertiary: var(--x-panel);
  --fill-system-green: #a9ce86;
  --fill-system-orange: var(--x-gold);
  --fill-system-red: var(--x-red);
  --stroke-primary: var(--x-line-strong);
  --stroke-secondary: var(--x-line);
  --hover-wash: rgba(238, 232, 220, .055);
  --mat-regular: rgba(17, 15, 20, .9);
  --hark-shadow: 0 18px 52px rgba(0, 0, 0, .34);
  --gutter: clamp(16px, 3vw, 26px);
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--x-void) !important;
  color: var(--x-bone);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::after { content: none !important; display: none !important; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background: url("thrum-veins-bg.jpg") center 35% / min(100vw, 1040px) auto no-repeat;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.65) 35%, transparent 84%);
}

.x-app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 860px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: var(--x-bone);
  background:
    linear-gradient(180deg, rgba(16,14,19,.965), rgba(16,14,19,.935)),
    url("thrum-veins-bg.jpg") center 28% / 920px auto no-repeat;
  border-inline: 1px solid rgba(238,232,220,.055);
  box-shadow: 0 0 90px rgba(0,0,0,.42);
}
.page.x-app { width: min(100%, 860px); max-width: none; padding: 0; gap: 0; }
.x-app::before,
.x-app::after { content: none !important; display: none !important; animation: none !important; }
.x-scroll {
  min-height: 0;
  scrollbar-color: rgba(238,232,220,.22) transparent;
  scrollbar-width: thin;
}
.x-scroll::-webkit-scrollbar { width: 8px; }
.x-scroll::-webkit-scrollbar-thumb { background: rgba(238,232,220,.18); border: 2px solid transparent; background-clip: padding-box; border-radius: 9px; }

/* The masthead reads like an imprint, not a generic app bar. */
.x-bar {
  position: relative;
  z-index: 64;
  flex: none;
  min-height: 62px;
  box-sizing: border-box;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px;
  border-bottom: 1px solid var(--x-line);
  background: rgba(16,14,19,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.x-bar::before,
.x-bar::after { content: none !important; }
.x-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.x-brand-lockup { display: flex; flex-direction: column; gap: 3px; }
.x-bar h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--x-bone);
  font: 800 25px/1 "Big Shoulders Display", "Arial Narrow", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: none;
  animation: none !important;
}
.x-strap {
  color: #928b98;
  font: 12px/1.2 var(--x-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.x-glyph {
  position: relative;
  width: 17px;
  height: 17px;
  box-sizing: border-box;
  flex: none;
  border: 1px solid var(--x-acid);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(196,232,154,.11);
}
.x-glyph::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--x-acid);
}
.x-glyph::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(196,232,154,.25);
  border-radius: 50%;
  animation: none !important;
}
.x-avbtn { color: var(--text-secondary); }
.x-avbtn:hover { color: var(--x-acid); }
.x-av { box-shadow: 0 0 0 1px rgba(238,232,220,.22); }
.x-menu {
  background: #1b1820;
  border: 1px solid var(--x-line-strong);
  border-radius: 12px;
  box-shadow: var(--hark-shadow);
}
.x-menu .btn { width: 100%; justify-content: flex-start; }
.x-subbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(18,16,21,.94);
  border-bottom: 1px solid var(--x-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Notes are editorial rows. Quiet surfaces keep real posts, scripts and CJK text in front. */
.x-note,
.x-note:nth-child(even),
.x-notif,
.x-notif:nth-child(even) {
  position: relative;
  margin: 0;
  padding: 19px var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--x-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .18s ease;
}
.x-note:hover,
.x-note:focus-within,
.x-notif:hover,
.x-notif:focus-within {
  background: rgba(146,125,181,.055);
  box-shadow: none;
}
.x-note.is-focus,
.x-notif.is-new {
  background: rgba(146,125,181,.09);
  box-shadow: inset 2px 0 0 var(--x-violet);
}
.x-notif.is-new::after { background: var(--x-acid); box-shadow: none; animation: none !important; }
.x-kebab { display: none !important; }
.x-note .x-note__body { min-width: 0; padding-right: 0; }
.x-note__meta { gap: 9px; align-items: baseline; font-size: 12px; line-height: 1.4; }
.x-note__meta .x-name { max-width: 68%; color: var(--x-bone); font-weight: 600; }
.x-note__meta > span { color: #8f8895; font: 11px/1.3 var(--x-mono); }
.x-note__re { margin-top: 5px; color: #a79bb8; font: 12px/1.4 var(--x-mono); }
.x-note__re .x-name { color: var(--x-violet); }
.x-note__text {
  margin: 8px 0 9px;
  color: #e9e4da;
  font: 400 16px/1.58 var(--sans, "Geist", system-ui, sans-serif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: pretty;
}
.x-note__text a,
.x-muted a,
.x-reader a,
.x-bub__t a { color: #c8dfa9; text-decoration-color: rgba(196,232,154,.42); text-underline-offset: 3px; }
.x-note__text pre,
.x-reader pre,
.x-note__text blockquote {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--x-line);
  border-radius: 8px;
  background: rgba(10,9,12,.62);
  box-shadow: none;
  color: #e9e4da;
}
.x-note__text pre,
.x-reader pre { padding: 13px 15px; font: 13px/1.55 var(--x-mono); }
.x-note__text blockquote { margin: 10px 0; padding: 8px 12px; border-left: 2px solid var(--x-violet); }
.x-note__text img,
.x-note__text video,
.x-art img,
.x-reader img,
.x-yt,
.x-yt-frame,
.x-banner { z-index: auto !important; border-radius: 10px; }
.x-note__text audio { filter: sepia(.12); }
.x-kids { margin-left: 18px; border-left-color: rgba(146,125,181,.34); }
.x-kids--flat { margin-left: 0; }
.x-rx { color: #c5b9d7; }

/* Actions use a shared quiet language; money actions keep a distinct warm cue. */
.x-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.x-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 35px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #aaa3ae;
  font: 500 12px/1 var(--sans, "Geist", system-ui, sans-serif);
  box-shadow: none;
  text-shadow: none;
}
.x-actions .btn:hover,
.x-actions .btn:focus-visible {
  border-color: var(--x-line-strong);
  background: rgba(238,232,220,.055);
  color: var(--x-bone);
  box-shadow: none;
}
.x-actions .btn.is-on[data-act="like"] { border-color: rgba(196,232,154,.24); background: rgba(196,232,154,.10); color: var(--x-acid); box-shadow: none; }
.x-actions [data-act="like"] .x-ic { fill: none; }
.x-actions .btn.is-on[data-act="like"] .x-ic { fill: currentColor; }
.x-actions [data-act="reply"] { color: #b8a9d0; }
.x-actions [data-act="zap"],
.x-actions [data-nz] { color: var(--x-gold); }
.x-actions [data-act="zap"]:hover,
.x-actions [data-nz]:hover { border-color: rgba(223,189,123,.32); color: #f1d499; }
.x-actions .x-ic { width: 16px; height: 16px; flex: none; }
.x-actions .x-lbl { color: inherit; }
.x-actions [data-zt],
.x-actions [data-nzt] { color: inherit; font: 11px/1 var(--x-mono); }
[data-zt], [data-nzt] { font-family: var(--x-mono); }

/* Controls: subdued by default, clear emphasis only for the next step. */
.btn {
  min-height: 40px;
  border: 1px solid var(--x-line-strong);
  border-radius: 9px;
  background: #1a171f;
  color: var(--x-bone);
  box-shadow: none;
  font-weight: 500;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover { border-color: rgba(196,232,154,.34); background: #211d26; color: var(--x-bone); box-shadow: none; }
.btn:active,
.btn:active::before { transform: translateY(1px); scale: 1; animation: none !important; }
.btn::before { content: none !important; }
.btn:focus-visible,
.x-tabs button:focus-visible,
.x-pk:focus-visible,
.x-livechip:focus-visible { outline: 2px solid var(--x-acid); outline-offset: 3px; }
.btn:disabled { opacity: .46; cursor: not-allowed; }
.btn.is-on,
.x-row .btn[aria-pressed="true"] { border-color: rgba(196,232,154,.36); background: rgba(196,232,154,.11); color: var(--x-acid); }
.btn.x-ghost,
.x-actions .btn,
.x-relay .btn,
.x-menu .btn,
.x-reply .btn,
.x-sheet .x-between .btn,
.x-row .btn[aria-pressed="false"] { background: transparent; color: var(--text-secondary); border-color: var(--x-line); }
.btn.x-ghost:hover,
.x-relay .btn:hover,
.x-menu .btn:hover,
.x-reply .btn:hover { color: var(--x-bone); border-color: var(--x-line-strong); background: rgba(238,232,220,.05); }
#post,
#pom-go {
  border-color: var(--x-acid);
  background: var(--x-acid);
  color: #151713;
  font-weight: 650;
}
#post:hover,
#pom-go:hover { background: #d2efad; color: #151713; }
#bunker-go,
#npub-go,
#amber-start,
#ext-go,
#al-bunker-go,
#al-nsec-go,
#al-ext-go { background: #1a171f; color: var(--x-bone); border-color: var(--x-line-strong); font-weight: 500; }
.x-pomgo { min-height: 48px; }
.btn.x-pomgo.x-pomalt { background: transparent; color: var(--x-bone); border-color: var(--x-line-strong); }
#signout { color: #e19a91; border-color: rgba(223,135,126,.25); }
.x-input,
.x-text {
  border: 1px solid var(--x-line-strong);
  border-radius: 9px;
  background: rgba(10,9,12,.7);
  color: var(--x-bone);
  box-shadow: none;
  line-height: 1.5;
}
.x-input::placeholder,
.x-text::placeholder { color: #766f7b; opacity: 1; }
.x-input:focus,
.x-text:focus { outline: none; border-color: rgba(196,232,154,.68); box-shadow: 0 0 0 3px rgba(196,232,154,.09); }
.x-text { min-height: 170px; padding: 15px; }
.x-pad { gap: 14px; }
.x-card,
.x-art,
.x-reply {
  border: 1px solid var(--x-line);
  border-radius: 12px;
  background: rgba(23,20,27,.88);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.x-card { padding: 18px; gap: 12px; }
.x-card h2 { color: var(--x-bone); font: 600 17px/1.25 var(--sans, "Geist", system-ui, sans-serif); letter-spacing: -.015em; }
.x-card p,
.x-muted { color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.x-card:focus-within { border-color: rgba(196,232,154,.3); box-shadow: none; }
.x-art { padding: 13px; }
.x-art b { color: var(--x-bone); }
.x-reply { padding: 10px 12px; color: var(--text-secondary); }
.x-empty { color: var(--text-secondary); line-height: 1.55; }
.x-listen { gap: 14px; color: #c2b4d6; font: 12px/1.4 var(--x-mono); letter-spacing: .09em; }
.x-listen::before {
  width: 46px;
  height: 46px;
  opacity: .75;
  background: radial-gradient(circle, var(--x-acid) 0 2px, transparent 3px), repeating-radial-gradient(circle, transparent 0 8px, rgba(196,232,154,.28) 9px 10px, transparent 11px 16px);
  animation: x-ring 3.2s ease-out infinite;
}
.x-livebar { gap: 8px; padding: 11px var(--gutter); border-bottom: 1px solid var(--x-line); background: rgba(20,17,23,.7); }
.x-livechip {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--x-line-strong);
  border-radius: 7px;
  background: transparent;
  color: #c4bdc8;
  font: 11px/1 var(--x-mono);
  letter-spacing: .04em;
  text-transform: none;
}
.x-livechip:hover,
.x-livechip:focus-visible { border-color: rgba(196,232,154,.38); color: var(--x-acid); box-shadow: none; }
.x-lvdot { background: var(--x-acid); box-shadow: 0 0 0 3px rgba(196,232,154,.09); }

/* Bottom navigation stays familiar on mobile, with a small consistent visual index. */
.x-tabs {
  position: relative;
  z-index: 64;
  flex: none;
  display: flex;
  padding: 5px 6px max(5px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--x-line);
  background: rgba(16,14,19,.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.x-tabs button {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 53px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #85808a;
  font: 10px/1.1 var(--sans, "Geist", system-ui, sans-serif);
  letter-spacing: .015em;
  text-shadow: none;
  box-shadow: none;
  animation: none !important;
}
.x-tabs button[aria-selected="true"] {
  color: var(--x-acid);
  background: rgba(196,232,154,.055);
  box-shadow: none;
  text-shadow: none;
}
.x-tabs button[aria-selected="true"]::after { content: none !important; }
.x-tabs .x-ic { width: 17px; height: 17px; margin: 0; vertical-align: initial; }
.x-tabs .x-badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 10px);
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid #11100f;
  border-radius: 99px;
  background: var(--x-acid);
  color: #11100f;
  font: 10px/14px var(--x-mono);
  animation: none !important;
}
.x-toast { bottom: calc(75px + env(safe-area-inset-bottom)); background: var(--x-bone); color: #17141b; box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.x-badge { background: var(--x-acid); color: #151713; animation: none !important; }
.x-dot.is-ok { background: var(--x-acid); box-shadow: none; }
.x-dot.is-bad { background: var(--x-red); box-shadow: none; }
.x-wal-bal { color: var(--x-acid); text-shadow: none; }
.x-relay b.x-mono { color: var(--x-acid); }
.x-dmc { background: rgba(16,14,19,.97); border-top-color: var(--x-line-strong); }
.x-dmrow:hover { background: rgba(146,125,181,.07); }
.x-bub { border-color: rgba(146,125,181,.34); background: rgba(146,125,181,.09); box-shadow: none; }
.x-bub.is-mine { border-color: rgba(196,232,154,.26); background: rgba(196,232,154,.07); box-shadow: none; }
.x-bub__who { color: #c1afd9; }
.x-dmkey { border-color: rgba(223,189,123,.45); color: var(--x-bone); }
.x-dmstate { color: var(--x-acid); }
.x-dmstate.is-off { color: var(--text-secondary); }
.x-sheet { background: rgba(6,5,8,.74); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.x-sheet__card {
  max-width: 720px;
  border: 1px solid var(--x-line-strong);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #17141b;
  box-shadow: 0 -12px 48px rgba(0,0,0,.34);
}
.x-sheet__card h2 { font-size: 19px; }
.x-qr { border-radius: 8px; }
.x-code { border-radius: 8px; background: rgba(10,9,12,.7); }
.x-pomop label { font-family: var(--x-mono); }
.x-pomop input[type="checkbox"],
.x-pomopt input { accent-color: var(--x-acid); }
.x-pomok { color: var(--x-acid); }
.x-pombad { color: var(--x-red); }
.x-agentfoot { color: var(--text-secondary); }
.x-agentfoot a { color: var(--x-bone); }
.x-prof { border-bottom-color: var(--x-line); }
.x-banner { background: radial-gradient(ellipse at 50% 120%, rgba(196,232,154,.14), rgba(146,125,181,.18) 42%, #131018 78%); }
.x-tabs button,
.x-note__text,
.x-card,
.x-avbtn,
.x-livechip,
.btn { -webkit-tap-highlight-color: transparent; }

@media (min-width: 700px) {
  .x-bar { padding-inline: 28px; }
  .x-pad { max-width: 740px; margin-inline: auto; }
  #login .x-pad { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-content: start; align-items: stretch; gap: 14px; }
  #login .x-pad > .x-card:first-child,
  #login .x-pad > .x-agentfoot { grid-column: 1 / -1; }
  #login .x-pad > .x-card:first-child { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px, .85fr); align-items: center; }
  #login .x-pad > .x-card:first-child .x-col { grid-row: span 2; }
  #login .x-pad > .x-card:first-child p { align-self: end; }
  #login .x-pad > .x-card:first-child p:last-child { align-self: start; }
  .x-sheet__card { margin-bottom: 12px; border-bottom: 1px solid var(--x-line-strong); border-radius: 16px; }
}
@media (max-width: 420px) {
  .x-strap { letter-spacing: .04em; }
  .x-note, .x-note:nth-child(even), .x-notif { padding-block: 16px; }
  .x-actions { gap: 2px; }
  .x-actions .btn { min-height: 34px; padding-inline: 7px; gap: 4px; font-size: 11px; }
  .x-actions .x-ic { width: 15px; height: 15px; }
}
@media (max-width: 600px) {
  .btn { min-height: var(--tap, 44px); }
  .x-note__text pre,
  .x-reader pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* THRUM balance pass: bring back the portal color, keep the calmer reading surface. */
:root,
:root[data-theme] {
  --x-void: #0b0712;
  --x-violet: #9161cb;
  --x-acid: #b8ff1a;
  --x-red: #ff6b74;
  --x-gold: #ffb800;
  --x-bone: #f2e8cf;
  --x-line: rgba(190, 155, 226, .20);
  --x-line-strong: rgba(184, 255, 26, .34);
  --x-panel: #1a1026;
  --x-panel-raised: #211431;
  --text-primary: var(--x-bone);
  --text-secondary: rgba(242, 232, 207, .72);
  --text-tertiary: rgba(242, 232, 207, .42);
  --text-primary-on: #100d14;
  --fill-primary: var(--x-acid);
  --fill-primary-on: var(--x-void);
  --fill-tertiary: var(--x-panel);
  --fill-system-green: var(--x-acid);
  --fill-system-orange: var(--x-gold);
  --fill-system-red: var(--x-red);
  --stroke-primary: var(--x-line-strong);
  --stroke-secondary: var(--x-line);
  --hover-wash: rgba(184, 255, 26, .075);
  --mat-regular: rgba(13, 8, 20, .86);
  --hark-shadow: 0 14px 42px rgba(0, 0, 0, .38);
}

body::before {
  opacity: .32;
  background: url("thrum-user-bg.jpg") center 50% / cover no-repeat;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 58%, transparent 100%);
}
.x-app {
  border-inline-color: rgba(145, 97, 203, .20);
  background-color: #0b0712;
  background-image:
    linear-gradient(180deg, rgba(11,7,18,.46), rgba(11,7,18,.52)),
    url("thrum-user-bg.jpg");
  background-size: 100% 100%, cover;
  background-position: center, center 92%;
  background-repeat: no-repeat;
}
.x-bar {
  border-bottom-color: rgba(145,97,203,.32);
  background: rgba(11,7,18,.91);
}
.x-bar h1 { text-shadow: 0 0 16px rgba(184,255,26,.10); }
.x-strap { color: rgba(242,232,207,.58); }
.x-glyph {
  border-color: var(--x-acid);
  box-shadow: 0 0 11px rgba(184,255,26,.22), inset 0 0 0 4px rgba(184,255,26,.12);
}
.x-glyph::after { border-color: rgba(184,255,26,.4); animation: thrum-orbit 3.8s ease-in-out infinite !important; }
@keyframes thrum-orbit {
  0%, 100% { transform: scale(.94); opacity: .42; }
  50% { transform: scale(1.12); opacity: .9; }
}

/* A card-like reading surface, not neon frames around every word. */
.x-note,
.x-note:nth-child(even),
.x-notif,
.x-notif:nth-child(even) {
  margin: 10px 10px;
  padding: 17px clamp(14px, 2.6vw, 22px);
  border: 1px solid rgba(145,97,203,.39);
  border-radius: 17px 11px 17px 11px;
  background: linear-gradient(142deg, rgba(36,22,54,.92), rgba(17,13,24,.93));
  box-shadow: inset 0 0 22px rgba(113,61,177,.065), 0 7px 22px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.x-note:nth-child(even),
.x-notif:nth-child(even) { border-radius: 11px 17px 11px 17px; }
.x-note:hover,
.x-note:focus-within,
.x-notif:hover,
.x-notif:focus-within {
  border-color: rgba(184,255,26,.39);
  background: linear-gradient(142deg, rgba(43,25,64,.95), rgba(20,14,28,.95));
  box-shadow: inset 0 0 24px rgba(131,75,198,.10), 0 8px 25px rgba(0,0,0,.24);
}
.x-note.is-focus,
.x-notif.is-new {
  border-color: rgba(184,255,26,.62);
  background: linear-gradient(142deg, rgba(43,27,63,.96), rgba(19,14,27,.96));
  box-shadow: inset 0 0 0 1px rgba(184,255,26,.12), 0 0 20px rgba(101,53,159,.2);
}
.x-notif.is-new::after { background: var(--x-acid); box-shadow: 0 0 10px rgba(184,255,26,.42); }
.x-note .x-av,
.x-notif .x-av { box-shadow: 0 0 0 1px rgba(174,135,224,.54), 0 0 13px rgba(104,59,158,.25); }
.x-note__meta .x-name { color: #f5eddd; }
.x-note__meta > span { color: rgba(242,232,207,.58); }
.x-note__re { color: #c4a5ea; }
.x-note__re .x-name { color: #d4bcf4; }
.x-note__text { color: #f1ecdf; }
.x-note__text a,
.x-muted a,
.x-reader a,
.x-bub__t a { color: #c9ed85; text-decoration-color: rgba(184,255,26,.45); }
.x-note__text pre,
.x-reader pre,
.x-note__text blockquote {
  border-color: rgba(145,97,203,.25);
  background: rgba(9,7,13,.94);
  box-shadow: inset 0 0 18px rgba(83,47,129,.10);
}
.x-note__text pre,
.x-reader pre { color: #f0eadf; }
.x-note__text blockquote { border-left-color: var(--x-violet); }
.x-kids { border-left-color: rgba(145,97,203,.48); }
.x-rx { color: #d2b9ef; }

/* Clearly labeled actions pick up restrained color, without competing with post text. */
.x-actions .btn {
  border-color: rgba(145,97,203,.34);
  border-radius: 9px;
  background: rgba(12,8,19,.58);
  color: rgba(242,232,207,.78);
}
.x-actions .btn:hover,
.x-actions .btn:focus-visible {
  border-color: rgba(184,255,26,.42);
  background: rgba(62,36,91,.42);
  color: #fff7e8;
}
.x-actions .btn.is-on[data-act="like"] {
  border-color: rgba(184,255,26,.56);
  background: rgba(184,255,26,.12);
  color: var(--x-acid);
}
.x-actions [data-act="like"]:hover { border-color: var(--x-acid); color: var(--x-acid); }
.x-actions [data-act="reply"] { color: #d0b4f1; }
.x-actions [data-act="reply"]:hover { border-color: rgba(174,135,224,.6); color: #e4d1fa; }
.x-actions [data-act="zap"],
.x-actions [data-nz] { color: #f4c65a; }
.x-actions [data-act="zap"]:hover,
.x-actions [data-nz]:hover { border-color: rgba(255,184,0,.54); color: #ffd36d; }
.x-actions [data-nzt],
.x-actions [data-zt] { color: inherit; }

/* Purple-black controls; lime is saved for the action in focus. */
.btn {
  border-color: rgba(145,97,203,.32);
  background: rgba(34,22,49,.83);
  color: var(--x-bone);
}
.btn:hover { border-color: rgba(184,255,26,.42); background: rgba(49,31,71,.92); color: #fff7e8; }
.btn:focus-visible,
.x-tabs button:focus-visible,
.x-pk:focus-visible,
.x-livechip:focus-visible { outline-color: var(--x-acid); }
.btn.is-on,
.x-row .btn[aria-pressed="true"] { border-color: rgba(184,255,26,.54); background: rgba(184,255,26,.12); color: var(--x-acid); }
.btn.x-ghost,
.x-actions .btn,
.x-relay .btn,
.x-menu .btn,
.x-reply .btn,
.x-sheet .x-between .btn,
.x-row .btn[aria-pressed="false"] { border-color: rgba(145,97,203,.30); background: rgba(14,9,22,.48); color: rgba(242,232,207,.78); }
.btn.x-ghost:hover,
.x-relay .btn:hover,
.x-menu .btn:hover,
.x-reply .btn:hover { border-color: rgba(184,255,26,.4); background: rgba(49,31,71,.75); color: var(--x-bone); }
#post,
#pom-go { border-color: var(--x-acid); background: var(--x-acid); color: #11100d; box-shadow: 0 0 16px rgba(184,255,26,.13); }
#post:hover,
#pom-go:hover { background: #ccff63; color: #11100d; box-shadow: 0 0 20px rgba(184,255,26,.24); }
#bunker-go,
#npub-go,
#amber-start,
#ext-go,
#al-bunker-go,
#al-nsec-go,
#al-ext-go { border-color: rgba(145,97,203,.42); background: rgba(34,22,49,.9); color: var(--x-bone); }
#signout { color: #ff9893; border-color: rgba(255,107,116,.38); }
.x-input,
.x-text { border-color: rgba(145,97,203,.48); background: rgba(10,7,15,.87); }
.x-input:focus,
.x-text:focus { border-color: rgba(184,255,26,.72); box-shadow: 0 0 0 3px rgba(184,255,26,.12), 0 0 18px rgba(99,57,151,.22); }

.x-card,
.x-art,
.x-reply {
  border-color: rgba(145,97,203,.32);
  background: linear-gradient(145deg, rgba(33,21,49,.92), rgba(19,15,24,.95));
  box-shadow: inset 0 0 24px rgba(112,61,177,.055), 0 6px 22px rgba(0,0,0,.17);
}
.x-card:focus-within { border-color: rgba(184,255,26,.40); box-shadow: inset 0 0 22px rgba(112,61,177,.08); }
.x-art:hover,
.x-art:focus-visible { border-color: rgba(184,255,26,.45); box-shadow: 0 0 18px rgba(105,60,161,.2); }
.x-input::placeholder,
.x-text::placeholder { color: rgba(242,232,207,.43); }
.x-empty { color: rgba(242,232,207,.72); }
.x-listen { color: #d2b2f0; }
.x-listen::before { opacity: .85; }
.x-livebar { border-bottom-color: rgba(145,97,203,.30); background: rgba(20,12,31,.76); }
.x-livechip { border-color: rgba(145,97,203,.45); background: rgba(14,9,22,.52); color: #d9c7f0; }
.x-livechip:hover,
.x-livechip:focus-visible { border-color: rgba(184,255,26,.52); color: var(--x-acid); box-shadow: 0 0 16px rgba(104,58,160,.2); }
.x-lvdot { box-shadow: 0 0 8px rgba(184,255,26,.44); }

.x-tabs { border-top-color: rgba(145,97,203,.38); background: rgba(11,7,18,.96); }
.x-tabs button { color: rgba(242,232,207,.65); }
.x-tabs button[aria-selected="true"] {
  color: var(--x-acid);
  background: rgba(184,255,26,.075);
  box-shadow: inset 0 2px 0 var(--x-acid), inset 0 9px 18px rgba(184,255,26,.07);
  text-shadow: 0 0 10px rgba(184,255,26,.18);
}
.x-tabs .x-badge { background: var(--x-acid); color: #100d14; border-color: #100d14; box-shadow: 0 0 12px rgba(184,255,26,.18); }
.x-toast { background: var(--x-acid); color: #100d14; box-shadow: 0 0 26px rgba(184,255,26,.2); }
.x-badge { background: var(--x-acid); color: #100d14; }
.x-dot.is-ok { background: var(--x-acid); box-shadow: 0 0 8px rgba(184,255,26,.32); }
.x-dot.is-bad { background: var(--x-red); box-shadow: 0 0 8px rgba(255,107,116,.25); }
.x-wal-bal { color: var(--x-acid); text-shadow: 0 0 18px rgba(184,255,26,.14); }
.x-relay b.x-mono { color: var(--x-acid); }
.x-dmc { background: rgba(12,8,19,.96); border-top-color: rgba(145,97,203,.42); }
.x-bub { border-color: rgba(145,97,203,.42); background: rgba(77,45,112,.22); box-shadow: inset 0 0 16px rgba(112,61,177,.09); }
.x-bub.is-mine { border-color: rgba(184,255,26,.36); background: rgba(63,81,31,.18); }
.x-bub__who { color: #d0b4f1; }
.x-dmkey { border-color: rgba(255,184,0,.48); }
.x-dmstate { color: var(--x-acid); }
.x-sheet__card { border-color: rgba(145,97,203,.5); background: #170f22; box-shadow: 0 -12px 48px rgba(45,20,73,.36); }
.x-menu { border-color: rgba(145,97,203,.45); background: #1a1026; }
.x-prof { border-bottom-color: rgba(145,97,203,.30); }
.x-banner { background: radial-gradient(ellipse at 50% 110%, rgba(184,255,26,.22), rgba(145,97,203,.4) 43%, #0b0712 82%); }

@media (max-width: 600px) {
  .x-app {
    background-size: 100% 100%, auto max(100dvh, 266.667vw);
    background-position: center, center 68%;
  }
  .x-note,
  .x-note:nth-child(even),
  .x-notif,
  .x-notif:nth-child(even) { margin: 8px 8px; padding: 15px 13px; }
  .x-actions { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-glyph::after { animation: none !important; }
}