/* Shared site chrome: header, mobile menu, footer.
   Loaded after each page's own styles. Uses the page's colour tokens with fallbacks. */

.site-top, .site-foot {
  --acc: var(--cyan, #22d3ee);
  --c-line: var(--line, #1c2f4d);
  --c-ink: var(--ink, #e6eef8);
  --c-ink2: var(--ink2, #8aa0bd);
  --c-ink3: var(--ink3, #5a6f8c);
  --c-panel: var(--panel, #0e1626);
  --c-bg2: var(--bg2, #0a0f1a);
  --c-gold: var(--gold, #e4c778);
  --c-brass: var(--brass, #c8a04b);
  --c-ffd: var(--ffd, "Orbitron", sans-serif);
  --c-ffb: var(--ffb, "Manrope", system-ui, sans-serif);
  --c-ffm: var(--ffm, "JetBrains Mono", monospace);
}
body.theme-gold .site-top, body.theme-gold .site-foot { --acc: var(--gold, #e4c778); }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; }
.skip-link:focus { left: 12px; }

.site-wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(14px, 3.5vw, 36px); }

/* header */
.site-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: linear-gradient(180deg, rgba(8,13,22,.97), rgba(8,13,22,.85));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--c-ffb);
}
.site-top > .site-wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--c-ffd); font-weight: 900; font-size: 1.12rem; letter-spacing: .04em; color: var(--c-ink); text-decoration: none; flex: 0 0 auto; }
.site-bolt { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(158deg, var(--c-gold), var(--c-brass)); display: grid; place-items: center; }
.site-bolt svg { width: 19px; height: 19px; fill: #160f00; }
.site-hex { width: 38px; height: 38px; display: grid; place-items: center; filter: drop-shadow(0 0 6px rgba(0,229,255,.35)); }
.site-hex svg { width: 38px; height: 38px; }
.site-nav { display: flex; gap: 20px; }
.site-nav a { font-size: .87rem; font-weight: 600; color: var(--c-ink2); text-decoration: none; padding: 6px 0; position: relative; white-space: nowrap; }
.site-nav a:hover { color: var(--c-ink); }
.site-nav a.on { color: var(--acc); }
.site-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acc); border-radius: 2px; }
.site-search { flex: 1; max-width: 260px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 10px; }
.site-search svg { width: 15px; height: 15px; color: var(--c-ink3); flex: 0 0 auto; }
.site-search input { flex: 1; min-width: 0; background: none; border: none; color: var(--c-ink); font: inherit; font-size: .86rem; }
.site-search input:focus { outline: none; }
.site-search:focus-within { border-color: var(--acc); }
.site-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; font-family: var(--c-ffb); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: border-color .15s, box-shadow .15s; }
.st-btn.ghost { color: var(--c-ink); border-color: var(--c-line); background: transparent; }
.st-btn.ghost:hover { border-color: var(--acc); }
.st-btn.solid { color: #160f00; background: linear-gradient(180deg, #f0da96, var(--c-brass)); }
.st-btn.solid:hover { box-shadow: 0 8px 22px -10px rgba(228,199,120,.6); }

.site-burger { display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.site-burger span { display: block; width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.site-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-burger.open span:nth-child(2) { opacity: 0; }
.site-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-sheet { border-top: 1px solid var(--c-line); padding: 12px clamp(14px, 3.5vw, 36px) 18px; display: flex; flex-direction: column; background: rgba(8,13,22,.98); }
.site-sheet[hidden] { display: none; }
.site-sheet > a { padding: 13px 2px; color: var(--c-ink2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--c-line); }
.site-sheet > a.on { color: var(--acc); }
.sheet-search input { width: 100%; height: 44px; padding: 0 14px; margin-bottom: 6px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); font: inherit; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sheet-actions .st-btn { height: 46px; }

@media (max-width: 1180px) { .site-search { display: none; } .site-actions { margin-left: auto; } }
@media (max-width: 980px) {
  .site-nav, .site-actions { display: none; }
  .site-burger { display: flex; }
}

/* footer */
.site-foot { border-top: 1px solid var(--c-line); background: var(--c-bg2); padding: 48px 0 26px; margin-top: 32px; font-family: var(--c-ffb); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px; }
.foot-brand p { color: var(--c-ink2); font-size: .86rem; max-width: 32ch; margin: 14px 0 0; line-height: 1.6; }
.foot-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.foot-badges span { font-family: var(--c-ffm); font-size: .6rem; color: var(--c-ink2); border: 1px solid var(--c-line); border-radius: 6px; padding: 4px 8px; }
.site-foot .foot-h { font-family: var(--c-ffm); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 12px; font-weight: 700; }
.site-foot .foot-grid a:not(.site-brand) { display: block; color: var(--c-ink3); font-size: .86rem; padding: 5px 0; text-decoration: none; }
.site-foot a:not(.site-brand):hover { color: var(--acc); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--c-line); color: var(--c-ink3); font-size: .8rem; }
.foot-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-bottom a { color: var(--c-ink3); text-decoration: none; }

@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }

.inline-form { display: inline; margin: 0; }
button.st-btn { cursor: pointer; font: inherit; font-family: var(--c-ffb); font-weight: 700; font-size: .85rem; }
.test-banner { background: #3a2a05; color: #ffd98a; border-bottom: 1px solid #6b4f12; text-align: center; font-family: var(--c-ffm, monospace); font-size: .72rem; letter-spacing: .04em; padding: 7px 12px; }

/* shared a11y */
:focus-visible { outline: 2px solid var(--cyan, #22d3ee); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-burger span { transition: none; } }

/* Touch screens: every button and link is at least 44px tall to tap comfortably (WCAG 2.5.5 / Apple HIG).
   "html" raises specificity so this wins over each page's own compact .btn.sm styles. */
@media (pointer: coarse) {
  html .btn, html .btn.sm, html .st-btn, html .site-burger { min-height: 44px; }
  html .btn.sm { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  html .site-foot a { display: inline-block; padding: 8px 0; }
  html .site-sheet a { min-height: 44px; display: flex; align-items: center; }
}

/* ================= HUD confirm dialog (assets/js/app.js) ================= */
html.hud-open { overflow: hidden; }
.hud-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 6, 10, .74); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s; }
.hud-scrim.on { opacity: 1; }
.hud { --hud: var(--acc, #22d3ee); position: relative; width: min(420px, 100%); padding: 22px 20px 18px; color: #eef1f6; background: #0e141c;
  border: 1px solid color-mix(in srgb, var(--hud) 55%, transparent);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transform: scale(.92); transition: transform .22s cubic-bezier(.2, 1.4, .4, 1); font-family: "Manrope", system-ui, sans-serif; }
.hud-scrim.on .hud { transform: none; }
.hud::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--hud) 6%, transparent) 0 1px, transparent 1px 3px); }
.hud.danger { --hud: #f87171; }
.hud-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--hud); }
.hud-corner.c1 { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.hud-corner.c2 { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.hud-bar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font: 700 .66rem "JetBrains Mono", monospace; letter-spacing: .16em; color: var(--hud); }
.hud-bar i { font-style: normal; animation: hud-blink 1s steps(2) infinite; }
@keyframes hud-blink { 50% { opacity: 0; } }
.hud-title { font: 800 1.15rem/1.25 "Orbitron", "Manrope", sans-serif; margin: 0 0 8px; letter-spacing: .01em; }
.hud-body { color: #b8c2d1; font-size: .93rem; line-height: 1.55; margin: 0 0 16px; }
.hud-hint { color: #9aa6b8; font: 600 .74rem "JetBrains Mono", monospace; margin: -6px 0 14px; }
.hud-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hud-btn { flex: 1 1 140px; min-height: 48px; padding: 0 14px; cursor: pointer; font: 700 .82rem "JetBrains Mono", monospace; letter-spacing: .06em;
  color: #eef1f6; background: transparent; border: 1px solid #2d3748; position: relative; overflow: hidden; user-select: none; touch-action: none;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.hud-btn:hover { border-color: #4a5568; }
.hud-btn:focus-visible { outline: 2px solid var(--hud); outline-offset: 2px; }
.hud-btn.go { background: var(--hud); border-color: var(--hud); color: #07121a; }
.hud.danger .hud-btn.go { color: #1a0505; }
.hud-btn.hold { background: color-mix(in srgb, var(--hud) 16%, transparent); border-color: var(--hud); color: #fff; }
.hud-btn .hud-fill { position: absolute; inset: 0; background: var(--hud); transform: scaleX(0); transform-origin: left; }
.hud-btn .hud-lbl { position: relative; }
.hud-btn.hold.full { color: #1a0505; }
@media (prefers-reduced-motion: reduce) { .hud-scrim, .hud { transition: none; } .hud-bar i { animation: none; } }

/* ================= Toasts ================= */
.toast-stack { position: fixed; z-index: 900; top: calc(76px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100% - 32px)); display: grid; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px 13px 16px; border-radius: 12px;
  background: #121925; color: #eef1f6; border: 1px solid #2a3547; border-left: 4px solid #22d3ee; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  font: 600 .92rem/1.45 "Manrope", system-ui, sans-serif; animation: toast-in .28s cubic-bezier(.2, 1.2, .4, 1); }
.toast.ok { border-left-color: #34d399; } .toast.err { border-left-color: #f87171; } .toast.info { border-left-color: #22d3ee; }
.toast .toast-ic { flex: 0 0 auto; font-weight: 900; }
.toast.ok .toast-ic { color: #34d399; } .toast.err .toast-ic { color: #f87171; } .toast.info .toast-ic { color: #22d3ee; }
.toast .toast-msg { flex: 1; overflow-wrap: anywhere; }
.toast-x { flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -6px -6px 0; border: 0; background: transparent; color: #9aa6b8; cursor: pointer; border-radius: 8px; font-size: 1.1rem; }
.toast-x:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.toast.out { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ================= Loading buttons ================= */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ================= Password eye + strength ================= */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px !important; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: #9aa6b8; cursor: pointer; border-radius: 8px; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--acc, #22d3ee); }
.pw-eye:focus-visible { outline: 2px solid var(--acc, #22d3ee); outline-offset: -2px; }
.pw-eye svg { width: 20px; height: 20px; }
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 18px; font: 600 .78rem "Manrope", sans-serif; color: #9aa6b8; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 34px); gap: 4px; }
.pw-bars i { height: 5px; border-radius: 3px; background: #263041; transition: background .2s; }
.pw-meter[data-s="0"] .pw-bars i:nth-child(-n+1), .pw-meter[data-s="1"] .pw-bars i:nth-child(-n+1) { background: #f87171; }
.pw-meter[data-s="2"] .pw-bars i:nth-child(-n+2) { background: #fbbf24; }
.pw-meter[data-s="3"] .pw-bars i:nth-child(-n+3) { background: #34d399; }
.pw-meter[data-s="4"] .pw-bars i { background: #34d399; }

/* Buying / Selling switch (one account, two modes) */
.mode-switch { display: inline-flex; padding: 3px; border: 1px solid var(--c-line, #263041); border-radius: 11px; gap: 2px; }
.mode-switch a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; font-weight: 700; font-size: .8rem; color: var(--c-ink2, #a3adbd); text-decoration: none; }
.mode-switch a[aria-current="page"] { background: var(--acc, #22d3ee); color: #07121a; }
@media (max-width: 1180px) { .site-actions .mode-switch { display: none; } }

/* ================= Notification bell ================= */
.bell { position: relative; margin-left: 10px; }
.bell-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--c-line, #263041); border-radius: 10px;
  background: var(--c-panel, #121925); color: var(--c-ink, #eef1f6); cursor: pointer; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { border-color: var(--acc, #22d3ee); }
.bell-btn:focus-visible { outline: 2px solid var(--acc, #22d3ee); outline-offset: 2px; }
.bell-btn svg { width: 20px; height: 20px; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  background: #f87171; color: #1a0505; font: 800 .68rem/1 "JetBrains Mono", monospace; border: 2px solid var(--c-bg, #080d16); }
.bell-count.pop { animation: bell-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bell-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.bell-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto; z-index: 800;
  background: #0f151f; border: 1px solid #2a3547; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); font-family: "Manrope", system-ui, sans-serif; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #1f2837; position: sticky; top: 0; background: #0f151f; }
.bell-head b { font-size: .95rem; color: #eef1f6; } .bell-head a { font-size: .82rem; color: var(--acc, #22d3ee); }
.bell-item { display: grid; gap: 2px; padding: 12px 16px 12px 22px; border-bottom: 1px solid #1a2230; text-decoration: none; color: #b8c2d1; position: relative; font-size: .84rem; }
.bell-item b { color: #eef1f6; font-size: .88rem; font-weight: 700; }
.bell-item time { font-size: .72rem; color: #8591a3; }
.bell-item.unread::before { content: ""; position: absolute; left: 9px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc, #22d3ee); }
.bell-item:hover, .bell-item:focus-visible { background: #141c29; }
.bell-empty { padding: 20px 16px; margin: 0; color: #8591a3; font-size: .88rem; }
.bell-foot { display: block; padding: 12px 16px; text-align: center; font-size: .82rem; color: #9aa6b8; text-decoration: none; }
@media (max-width: 980px) { .bell { margin-left: auto; } .site-burger { margin-left: 8px; } .bell-panel { position: fixed; right: 12px; top: 68px; } }

/* ================= Notifications page ================= */
.notif-list { padding: 6px 0; }
.notif-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--line-soft, #1f2837); text-decoration: none; color: inherit; }
.notif-row:last-of-type { border-bottom: 0; }
.notif-row:hover { background: rgba(255, 255, 255, .02); }
.notif-row.unread { background: color-mix(in srgb, var(--acc, #22d3ee) 5%, transparent); }
.notif-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: rgba(255, 255, 255, .05); color: var(--acc, #22d3ee); }
.notif-ic.g-money { color: #34d399; } .notif-ic.g-security { color: #f87171; } .notif-ic.g-account { color: #e4c778; }
.notif-txt { display: grid; gap: 3px; min-width: 0; } .notif-txt b { font-size: .95rem; } .notif-txt span { font-size: .86rem; color: var(--ink2, #a3adbd); overflow-wrap: anywhere; }
.notif-time { font-size: .76rem; color: var(--ink3, #8591a3); white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.notif-time .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc, #22d3ee); display: inline-block; }
.prefs-t td.c, .prefs-t th.c { text-align: center; width: 90px; }
.prefs-t input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--acc, #22d3ee); }
/* Settings table fits phones: text column wraps, checkbox columns stay narrow */
.prefs-t { min-width: 0 !important; width: 100%; table-layout: fixed; }
.prefs-t th:first-child, .prefs-t td:first-child { width: auto; white-space: normal; overflow-wrap: anywhere; }
.prefs-t td.c, .prefs-t th.c { width: 64px; padding-left: 4px; padding-right: 4px; }
@media (max-width: 480px) { .prefs-t td.c, .prefs-t th.c { width: 56px; } }

/* Settings (gear / avatar) button next to the bell */
.gear-btn { width: 44px; height: 44px; margin-left: 10px; display: grid; place-items: center; border: 1px solid var(--c-line, #263041); border-radius: 10px;
  background: var(--c-panel, #121925); color: var(--c-ink, #eef1f6); text-decoration: none; }
.gear-btn:hover { border-color: var(--acc, #22d3ee); }
.gear-btn:focus-visible { outline: 2px solid var(--acc, #22d3ee); outline-offset: 2px; }
.gear-btn svg { width: 20px; height: 20px; }
.gear-btn .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
@media (max-width: 980px) { .gear-btn { margin-left: auto; } .gear-btn + .bell { margin-left: 8px; } }

/* Site-wide announcement (Admin → Settings) */
.site-announce { padding: 10px 16px; text-align: center; font: 600 .88rem/1.4 "Manrope", system-ui, sans-serif; background: #0e2a33; color: #b9f3ff; border-bottom: 1px solid #16505e; }
.site-announce.warn { background: #3a2a06; color: #ffe3a3; border-bottom-color: #6b4d0c; }

/* Signed-in header carries the gear + bell too: keep them full size and drop the search box earlier so nothing spills off-screen */
.gear-btn, .bell { flex: 0 0 auto; }
@media (max-width: 1240px) { .site-wrap:has(.bell) .site-nav a[href="escrow.php"], .site-wrap:has(.bell) .site-nav a[href="help.php"] { display: none; } }
@media (max-width: 1480px) { .site-wrap:has(.bell) .site-search { display: none; } .site-wrap:has(.bell) .site-actions { margin-left: auto; } }
/* Small phones (≤360px): tighten the header row so logo + alerts + settings + menu fit */
@media (max-width: 360px) {
  .site-top > .site-wrap { gap: 10px; }
  .site-brand { font-size: 1rem; gap: 8px; }
  .site-burger { margin-left: 6px; }
}

/* Cookie choice (only shown when Google Analytics is switched on) */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;margin:0 auto;padding:14px 16px;border-radius:14px;
  background:rgba(12,15,20,.96);border:1px solid rgba(228,199,120,.35);color:#e6eef8;box-shadow:0 18px 50px rgba(0,0,0,.5);
  display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:.86rem;line-height:1.5}
.cookie-note[hidden]{display:none}
.cookie-note p{margin:0;flex:1 1 260px}
.cookie-note a{color:#e4c778}
.cookie-note .cookie-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.cookie-note{bottom:calc(76px + env(safe-area-inset-bottom))}}

/* ================= 2026 redesign: N3 announcement, S2 live strip, A1 header, phone chips, app bottom menu ================= */
/* N3 announcement (Admin → Settings → Site announcement) */
.n3-ann { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 6px 48px; overflow: hidden; background: #07101c; border-bottom: 1px solid rgba(34,211,238,.35); font: 600 .88rem/1.4 "Manrope", system-ui, sans-serif; color: #e8fbff; }
.n3-ann::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 200% at 50% 50%, rgba(34,211,238,.18), transparent 70%); animation: n3-breathe 3s ease-in-out infinite; pointer-events: none; }
@keyframes n3-breathe { 50% { opacity: .4; } }
.n3-tag { position: relative; display: inline-flex; align-items: center; gap: 7px; font: 800 .62rem "Orbitron", sans-serif; letter-spacing: .18em; color: #22d3ee; padding: 5px 9px; border: 1px solid #22d3ee; border-radius: 6px; flex: 0 0 auto; }
.n3-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: n3-blink 1s infinite; }
@keyframes n3-blink { 50% { opacity: .25; } }
.n3-msg { position: relative; }
.n3-msg a { color: #22d3ee; }
.n3-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: #8aa0bd; font-size: 1rem; cursor: pointer; border-radius: 8px; }
.n3-x:hover { color: #fff; background: rgba(255,255,255,.06); }
.n3-ann.warn { background: #1a1204; border-bottom-color: rgba(251,191,36,.5); color: #fff1c9; }
.n3-ann.warn::before { background: repeating-linear-gradient(135deg, rgba(251,191,36,.16) 0 14px, transparent 14px 28px); background-size: 39.6px 100%; animation: n3-hazard 1.2s linear infinite; }
@keyframes n3-hazard { to { background-position: 39.6px 0; } }
.n3-ann.warn .n3-tag { color: #fbbf24; border-color: #fbbf24; }
@media (max-width: 760px) { .n3-ann { justify-content: flex-start; padding: 7px 42px 7px 12px; font-size: .8rem; } .n3-tag { font-size: .52rem; padding: 4px 7px; } }

/* S2 live strip (render_live_ticker) */
.lv-bug.s2 { position: relative; height: 42px; background: linear-gradient(90deg, #050a14, #08101f 50%, #050a14); border-bottom: 1px solid rgba(34,211,238,.28); font: 500 .74rem "JetBrains Mono", monospace; }
.lv-bug.s2::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, transparent, rgba(103,232,249,.16), transparent); animation: s2-scan 4s linear infinite; pointer-events: none; }
@keyframes s2-scan { from { left: -120px; } to { left: 100%; } }
.lv-bug.s2 .lv-bug-tag { position: relative; z-index: 2; gap: 10px; padding: 0 14px; background: #050a14; clip-path: none; color: #67e8f9; border-right: 1px solid rgba(34,211,238,.3); font: 800 .64rem "Orbitron", sans-serif; letter-spacing: .14em; }
.s2-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 13px; }
.lv-bug.s2 .s2-eq i { width: 3px; height: auto; border-radius: 0; box-shadow: none; background: #22d3ee; transform-origin: bottom; animation: s2-eq 1s ease-in-out infinite; }
.lv-bug.s2 .s2-eq i:nth-child(1) { height: 40%; } .lv-bug.s2 .s2-eq i:nth-child(2) { height: 90%; animation-delay: -.3s; } .lv-bug.s2 .s2-eq i:nth-child(3) { height: 60%; animation-delay: -.6s; } .lv-bug.s2 .s2-eq i:nth-child(4) { height: 75%; animation-delay: -.2s; }
@keyframes s2-eq { 50% { transform: scaleY(.4); } }
.lv-bug.s2 .lv-bug-run, .lv-bug.s2 .lv-bug-dup { height: 42px; gap: 18px; }
.lv-bug.s2 .lv-bug-run { padding-left: 16px; }
.lv-bug.s2 .s2-it { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 11px 0 3px; border: 1px solid rgba(34,211,238,.2); border-radius: 8px; background: rgba(34,211,238,.04); color: #a4b4ca; }
.lv-bug.s2 .s2-it img { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; background: #fff; }
.lv-bug.s2 .s2-it b { color: #67e8f9; font-weight: 700; }
.lv-bug.s2 .s2-it em { color: #e4c778; font-style: normal; }
.lv-bug.s2 .s2-it.sys { padding-left: 11px; border-color: rgba(228,199,120,.3); background: rgba(228,199,120,.04); }
.lv-bug.s2 .s2-it.sys b { color: #e4c778; }
@media (max-width: 760px) { .lv-bug.s2 { height: 38px; font-size: .68rem; } .lv-bug.s2 .lv-bug-run, .lv-bug.s2 .lv-bug-dup { height: 38px; } .lv-bug.s2 .lv-bug-tag { padding: 0 10px; font-size: .54rem; } }

/* A1 header */
.site-top.a1 { background: rgba(7,11,20,.92); }
.site-top.a1::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #22d3ee, transparent) no-repeat; background-size: 40% 100%; animation: a1-sweep 5s linear infinite; pointer-events: none; }
@keyframes a1-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.site-top.a1 > .site-wrap { gap: 16px; height: 68px; }
.a1-nav { gap: 2px; }
.a1-nav a { padding: 9px 12px; border-radius: 10px; font-size: .9rem; }
.a1-nav a.on { color: var(--c-ink); background: rgba(34,211,238,.08); }
.a1-nav a.on::after { left: 12px; right: 12px; bottom: 3px; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; }
.a1-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.a1-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--c-line); border-radius: 12px; background: rgba(14,22,38,.7); color: var(--c-ink); text-decoration: none; }
.a1-icon:hover { border-color: var(--acc); }
.a1-icon svg { width: 19px; height: 19px; }
.site-top.a1 .bell { margin-left: 0; }
.site-top.a1 .bell-btn { width: 42px; height: 42px; border-radius: 12px; }
.a1-sell { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 15px; border-radius: 12px; background: linear-gradient(90deg, #22d3ee, #3b82f6); color: #021018; font: 800 .88rem var(--c-ffb); text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px -10px rgba(34,211,238,.7); }
.a1-sell svg { width: 16px; height: 16px; }
.a1-sell:hover { filter: brightness(1.1); }
.a1-rank { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 7px; border-radius: 12px; border: 1px solid rgba(34,211,238,.35); background: rgba(34,211,238,.06); text-decoration: none; }
.a1-rank b { font: 800 .62rem "Orbitron", sans-serif; letter-spacing: .1em; color: #67e8f9; }
.a1-hex { width: 26px; height: 28px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #67e8f9, #3b82f6); display: grid; place-items: center; flex: 0 0 auto; }
.a1-hex svg { width: 13px; height: 13px; }
.a1-me { position: relative; }
.a1-me-btn { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px 0 4px; border-radius: 13px; border: 1px solid var(--c-line); background: rgba(14,22,38,.7); color: var(--c-ink); font: 700 .9rem var(--c-ffb); cursor: pointer; }
.a1-me-btn:hover, .a1-me-btn[aria-expanded="true"] { border-color: var(--acc); }
.a1-me-btn b { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1-caret { width: 14px; height: 14px; color: var(--c-ink3); }
.a1-av { width: 36px; height: 36px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #22d3ee, #8b5cf6, #f472b6, #22d3ee); flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; }
.a1-av > span, .a1-av img { width: 100%; height: 100%; border-radius: 50%; background: #0b1422; display: grid; place-items: center; font: 800 .72rem "Orbitron", sans-serif; color: #67e8f9; object-fit: cover; }
.a1-av > * { margin: 0 !important; }
.a1-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 240px; z-index: 800; padding: 8px; border-radius: 14px; border: 1px solid var(--c-line); background: rgba(10,16,28,.98); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.a1-menu[hidden] { display: none; }
.a1-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; }
.a1-who b { display: block; color: var(--c-ink); } .a1-who small { color: var(--c-ink3); font-size: .78rem; }
.a1-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: .88rem; color: var(--c-ink2); text-decoration: none; }
.a1-menu a:hover { background: var(--c-panel); color: var(--c-ink); }
.a1-menu .inline-form { display: block; }
.a1-out { width: 100%; min-height: 42px; margin-top: 6px; padding: 0 10px; text-align: left; border: 0; border-top: 1px solid var(--c-line); background: none; color: #f87171; font: 700 .88rem var(--c-ffb); cursor: pointer; }
.a1-chips { display: none; }
@media (max-width: 1180px) { .a1-nav a { padding: 9px 9px; font-size: .85rem; } .a1-me-btn b, .a1-caret { display: none; } .a1-me-btn { padding: 0 4px; } }
@media (max-width: 1040px) { .a1-search { display: none; } .a1-rank b { display: none; } .a1-rank { padding: 0 7px; } }
@media (max-width: 980px) {
  .site-top.a1 .a1-nav { display: none; }
  .a1-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px clamp(14px, 3.5vw, 36px); scrollbar-width: none; background: rgba(5,7,13,.96); border-bottom: 1px solid #152035; font-family: "Manrope", system-ui, sans-serif; }
  .a1-chips::-webkit-scrollbar { display: none; }
  .a1-chips a { flex: 0 0 auto; height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .86rem; color: #a4b4ca; border: 1px solid #1d2a42; text-decoration: none; white-space: nowrap; }
  .a1-chips a.on { color: #021018; background: #22d3ee; border-color: #22d3ee; }
}
@media (max-width: 760px) {
  .site-top.a1 > .site-wrap { height: 62px; gap: 8px; }
  .a1-sell { display: none; }
  .a1-right { gap: 8px; }
  .a1-signin, .a1-join { height: 40px; padding: 0 12px; }
}
@media (max-width: 340px) { .a1-word { display: none; } }

/* App-style bottom menu with a big + Sell (footer.php) */
@media (max-width: 760px) {
  .botnav { align-items: end; background: rgba(7,11,20,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid #1d2a42; }
  .botnav a.bn-sell { position: relative; top: -14px; background: none !important; color: #a4b4ca; }
  .botnav a.bn-sell .bn-plus { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(160deg, #22d3ee, #3b82f6); color: #021018; box-shadow: 0 10px 24px -6px rgba(34,211,238,.6), 0 0 0 4px #05070d; margin-bottom: 2px; }
  .botnav a.bn-sell .bn-plus svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .n3-ann::before, .n3-tag i, .lv-bug.s2::after, .s2-eq i, .site-top.a1::after { animation: none !important; } }
.a1-menu .a1-mode { display: flex; margin: 2px 0 6px; } .a1-menu .a1-mode a { flex: 1; justify-content: center; min-height: 36px; padding: 0 8px; }