/* heirowSnap Matrix terminal web theme */
:root {
  --accent: #39ff14 !important;
  --accent-2: #00ff88 !important;
  --accent-dim: #0f8f45 !important;
  --cyan: #44ffe8 !important;
  --amber: #d6ff6b !important;
  --bg: #000500 !important;
  --surface: rgba(0, 12, 4, .94) !important;
  --card: rgba(0, 18, 7, .9) !important;
  --panel: rgba(0, 24, 9, .84) !important;
  --border: rgba(57, 255, 20, .36) !important;
  --border-strong: rgba(57, 255, 20, .74) !important;
  --text: #d8ffe0 !important;
  --text-muted: #75aa7e !important;
  --error: #ff5f73 !important;
  --success: #39ff14 !important;
  --live: #39ff14 !important;
  --online: #39ff14 !important;
  --offline: #48604d !important;
  --terminal-font: "Cascadia Code", "Cascadia Mono", "Consolas", "SFMono-Regular", monospace !important;
  --ease-sine: cubic-bezier(.37, 0, .63, 1);
  --ease-circle: cubic-bezier(.785, .135, .15, .86);
}

html {
  background: #000 !important;
  color-scheme: dark;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
  scroll-padding-top: 0;
}

html.matrix-files-root {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  background: #000 !important;
  color: var(--text) !important;
  font-family: var(--terminal-font) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, .18) !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overscroll-behavior: none;
}

body > *:not(.matrix-rain-canvas):not(.matrix-scanline-overlay) {
  position: relative;
  z-index: 2;
}

.matrix-rain-canvas {
  position: fixed;
  inset: 0;
  display: block !important;
  width: 100vw;
  height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: #000;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .24 !important;
  background:
    repeating-linear-gradient(180deg, rgba(57, 255, 20, .06) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(57, 255, 20, .08), transparent 18%, transparent 82%, rgba(57, 255, 20, .07)) !important;
  background-size: 100% 9px, 100% 100% !important;
  transform: none !important;
  animation: terminalScan 7s var(--ease-sine) infinite !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .1 !important;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 50%, rgba(0, 0, 0, .12) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, .02), rgba(57, 255, 20, .03), rgba(0, 0, 255, .02)) !important;
  background-size: 100% 4px, 6px 100% !important;
  mix-blend-mode: screen;
  animation: none !important;
}

@keyframes terminalScan {
  0%, 100% { opacity: .38; }
  50% { opacity: .58; }
}

.bg-grid {
  display: none !important;
}

.aero-ripple {
  display: none !important;
}

.aero-tilt {
  transform: none !important;
  transform-style: flat !important;
}

.linux-location {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  min-height: 30px;
  padding: .34rem .65rem;
  border: 1px solid rgba(57, 255, 20, .38);
  border-radius: 4px;
  background: rgba(0, 10, 3, .78);
  color: var(--text);
  font-size: .78rem;
  line-height: 1;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .055), 0 0 18px rgba(57, 255, 20, .08);
  white-space: nowrap;
}

body > .linux-location {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
}

.topbar .linux-location {
  margin-right: .85rem;
  flex-shrink: 0;
}

.linux-location .host {
  color: var(--accent);
}

.linux-location .path {
  color: var(--cyan);
}

.linux-location .prompt {
  color: var(--amber);
}

.linux-location .cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(57, 255, 20, .6);
  animation: cursorBlink 1.08s steps(1, end) infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.linux-map {
  display: grid;
  gap: .18rem;
  padding: .55rem .7rem;
  border: 1px dashed rgba(57, 255, 20, .28);
  border-radius: 4px;
  background: rgba(0, 8, 2, .58);
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.topbar .linux-map {
  margin: 0 auto 0 1rem;
}

.hero .linux-map,
.card .linux-map {
  margin: 0 auto 1.2rem;
  width: max-content;
  max-width: 100%;
}

.linux-map strong,
.linux-map .active {
  color: var(--accent);
  font-weight: 700;
}

.topbar {
  gap: .75rem !important;
  background: rgba(0, 8, 3, .94) !important;
  border-bottom: 1px solid rgba(57, 255, 20, .42) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .64), inset 0 -1px 0 rgba(57, 255, 20, .12) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.logo,
.brand .logo,
.topbar .logo {
  color: #edfff0 !important;
  font-family: var(--terminal-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 14px rgba(57, 255, 20, .36) !important;
}

.topbar .logo::before,
.brand .logo::before,
.hero .logo::before {
  content: "./";
  color: var(--text-muted);
  font-weight: 400;
}

.logo span,
.brand .logo span,
.topbar .logo span,
a,
.tab.active,
.chat-user {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(57, 255, 20, .46) !important;
}

.hero,
.card,
.login-box,
.container,
.sidebar,
.chat-header,
.compose,
.compose-wrap,
.gif-panel,
.contact,
.stream-card,
.panel,
.account-card,
.file-card,
.video-card,
.player-shell,
.controls-card,
.msg-row.recv .msg-bubble,
main,
section {
  background:
    linear-gradient(180deg, rgba(57, 255, 20, .055), transparent 36px),
    rgba(0, 13, 4, .86) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(57, 255, 20, .055), inset 0 0 28px rgba(57, 255, 20, .045) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.hero,
.card,
.login-box,
.container,
.panel,
.player-shell,
.chat-layout {
  animation: terminalBoot .44s steps(6, end) both !important;
}

body:has(> .hero) {
  overflow-y: hidden !important;
}

@keyframes terminalBoot {
  0% { opacity: 0; filter: blur(3px) brightness(1.6); transform: translateY(8px); }
  65% { opacity: .9; filter: blur(.4px) brightness(1.15); }
  100% { opacity: 1; filter: none; transform: none; }
}

.hero {
  max-width: 760px !important;
  padding: clamp(1.4rem, 5vw, 3rem) !important;
  text-align: left !important;
}

.matrix-home {
  justify-content: center !important;
  padding: 0 !important;
}

.matrix-home .hero {
  margin: 0 !important;
  padding-top: clamp(1.2rem, 4vw, 2.4rem) !important;
}

.matrix-home .linux-location,
.matrix-home .linux-map {
  display: none !important;
}

.matrix-files {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
  padding-top: 0 !important;
}

.matrix-files .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  align-items: center !important;
  z-index: 120 !important;
}

.matrix-files .topbar .linux-location,
.matrix-files .topbar .linux-map {
  display: none !important;
}

.matrix-files .container {
  margin-top: 0 !important;
  padding-top: clamp(4.7rem, 7vh, 5.4rem) !important;
}

.hero::after {
  content: "/home/heirowSnap\A |-- files\A |-- chat\A `-- stream";
  display: block;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(57, 255, 20, .24);
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.45;
  white-space: pre;
}

.hero .logo {
  font-size: clamp(2.2rem, 8vw, 4.6rem) !important;
  font-weight: 700 !important;
  animation: none !important;
}

.tagline {
  color: var(--text-muted) !important;
  font-size: .95rem !important;
}

.tagline::before {
  content: "> ";
  color: var(--accent);
}

.topbar .nav a,
.topbar .download,
.topbar .logout,
.actions .btn {
  font-family: var(--terminal-font) !important;
}

.topbar .nav a::before,
.topbar .download::before,
.actions .btn::before {
  content: attr(data-linux-path);
  color: var(--accent) !important;
}

button,
.btn,
.download,
.logout,
input,
textarea,
select,
label,
.tab,
.contact,
.msg-bubble,
.cw-fab {
  font-family: var(--terminal-font) !important;
  border-radius: 4px !important;
  transition:
    transform .22s var(--ease-sine),
    background .22s var(--ease-sine),
    border-color .22s var(--ease-sine),
    box-shadow .22s var(--ease-sine),
    color .22s var(--ease-sine),
    opacity .22s var(--ease-sine),
    filter .22s var(--ease-sine) !important;
}

button,
.btn,
.btn-primary,
.btn-accent,
.download,
.compose button,
.paste-send {
  background: rgba(0, 22, 7, .86) !important;
  border: 1px solid rgba(57, 255, 20, .52) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .06), 0 0 18px rgba(57, 255, 20, .12) !important;
  text-transform: none !important;
}

button:hover,
.btn:hover,
.download:hover,
.logout:hover,
.contact:hover,
.file-card:hover,
.stream-card:hover,
.video-card:hover,
.compose-tools button:hover,
.compose-tools label:hover {
  transform: translateY(-1px) !important;
  border-color: var(--cyan) !important;
  color: #f3fff5 !important;
  background: rgba(0, 34, 11, .94) !important;
  box-shadow: 0 0 22px rgba(57, 255, 20, .18), inset 0 0 22px rgba(57, 255, 20, .08) !important;
  filter: none !important;
}

button:active,
.btn:active {
  transform: translateY(0) scale(.985) !important;
}

.btn-danger,
button.btn-danger,
.upload-cancel,
.paste-cancel {
  background: rgba(48, 0, 8, .86) !important;
  border-color: rgba(255, 95, 115, .58) !important;
  color: var(--error) !important;
}

input,
textarea,
select,
.upload-fname,
.status-select {
  background: rgba(0, 6, 2, .88) !important;
  border: 1px solid rgba(57, 255, 20, .3) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .045) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(117, 170, 126, .72) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, .14), 0 0 24px rgba(57, 255, 20, .16), inset 0 0 18px rgba(57, 255, 20, .08) !important;
}

.tab {
  color: var(--text-muted) !important;
  border-bottom-color: rgba(57, 255, 20, .16) !important;
}

.tab.active {
  border-bottom-color: var(--accent) !important;
}

.status-dot.Online,
.status-dot-tb.Online,
.status-dot.online,
.contact .dot.online,
.rec-badge.on {
  background: var(--accent) !important;
  box-shadow: 0 0 12px rgba(57, 255, 20, .72) !important;
}

.status-dot.Away,
.status-dot-tb.Away {
  background: var(--amber) !important;
}

.status-dot.Busy,
.status-dot.Offline,
.status-dot.Invisible,
.status-dot-tb.Busy,
.status-dot-tb.Offline,
.status-dot-tb.Invisible,
.contact .dot.offline {
  background: #425247 !important;
  box-shadow: none !important;
}

.msg-row.sent .msg-bubble,
.upload-fill,
.upload-bar,
.chat-upload-bar .upload-fill,
.cw-ufill {
  background: linear-gradient(90deg, #0d6f32, var(--accent), var(--cyan)) !important;
  color: #001904 !important;
  border-color: rgba(57, 255, 20, .65) !important;
  box-shadow: 0 0 20px rgba(57, 255, 20, .22) !important;
}

.msg-row.recv .msg-bubble {
  color: var(--text) !important;
}

.file-card.selected,
.contact.active,
.stream-card.live,
.tab.active {
  border-color: var(--border-strong) !important;
  box-shadow: 0 0 0 1px rgba(57, 255, 20, .5), 0 0 28px rgba(57, 255, 20, .18), inset 0 0 24px rgba(57, 255, 20, .065) !important;
}

.file-card .check {
  border-color: rgba(57, 255, 20, .42) !important;
  background: rgba(0, 0, 0, .74) !important;
  border-radius: 3px !important;
}

.file-card.selected .check {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.file-card.selected .check::after {
  color: #001904 !important;
}

.upload-zone {
  border: 1px dashed rgba(57, 255, 20, .42) !important;
  border-radius: 4px !important;
  background: rgba(0, 12, 4, .82) !important;
  box-shadow: inset 0 0 28px rgba(57, 255, 20, .045) !important;
}

.upload-zone::before {
  content: "$ scp ./payload /home/heirowSnap/uploads";
  display: block;
  margin-bottom: .8rem;
  color: var(--text-muted);
  font-size: .76rem;
  letter-spacing: 0;
}

.upload-zone.dragover {
  border-color: var(--accent) !important;
  background: rgba(0, 24, 8, .92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 28px rgba(57, 255, 20, .18), inset 0 0 34px rgba(57, 255, 20, .08) !important;
}

.upload-icon {
  display: none !important;
}

.upload-throbber,
.orb-loader,
.zip-spinner,
.spinner-lg::after,
.spinner,
.spinner-sm {
  border-radius: 2px !important;
  border: 1px solid rgba(57, 255, 20, .32) !important;
  background: transparent !important;
  box-shadow: 0 0 18px rgba(57, 255, 20, .2), inset 0 0 18px rgba(57, 255, 20, .08) !important;
  animation: terminalSpinner 1.1s var(--ease-circle) infinite !important;
}

.upload-throbber {
  width: 54px !important;
  height: 54px !important;
}

.upload-throbber::before,
.orb-loader::before,
.zip-spinner::before {
  content: "01";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: .82rem;
}

.upload-throbber span,
.orb-loader::after {
  display: none !important;
}

@keyframes terminalSpinner {
  0% { transform: rotate(0deg) scale(.98); filter: brightness(.92); }
  50% { transform: rotate(180deg) scale(1.04); filter: brightness(1.28); }
  100% { transform: rotate(360deg) scale(.98); filter: brightness(.92); }
}

.page-loader {
  background: rgba(0, 0, 0, .86) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  z-index: 500 !important;
}

.zip-overlay {
  z-index: 300 !important;
}

.page-loader-card {
  border: 1px solid rgba(57, 255, 20, .38);
  border-radius: 4px;
  padding: 1.3rem 1.6rem;
  background: rgba(0, 12, 4, .92);
  box-shadow: 0 0 34px rgba(57, 255, 20, .14);
}

.page-loader-text,
.zip-text,
.upload-status,
.upload-text,
.upload-done,
.empty,
.meta,
.file-card .meta,
.chat-status,
.status-text,
.sidebar-header,
.toast {
  color: var(--text-muted) !important;
  font-family: var(--terminal-font) !important;
}

.upload-progress,
.chat-upload-bar .upload-track {
  background: rgba(0, 5, 1, .92) !important;
  border: 1px solid rgba(57, 255, 20, .28) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .05) !important;
}

.upload-bar {
  border-radius: 3px !important;
  animation: terminalProgress 1.2s var(--ease-sine) infinite !important;
}

@keyframes terminalProgress {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.26); }
}

.thumb,
.video-thumb,
.preview,
video,
canvas:not(.matrix-rain-canvas),
iframe {
  background: #000 !important;
  border-color: rgba(57, 255, 20, .28) !important;
}

.toast {
  background: rgba(0, 12, 4, .94) !important;
  border-color: var(--border) !important;
  border-radius: 4px !important;
}

.toast.success {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

#selectionRect {
  border: 1px solid rgba(57, 255, 20, .9) !important;
  background: rgba(57, 255, 20, .12) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 22px rgba(57, 255, 20, .24), inset 0 0 18px rgba(57, 255, 20, .1) !important;
}

.contact-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.contact-list::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .58);
}

.contact-list::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 20, .36);
  border: 2px solid rgba(0, 0, 0, .72);
  border-radius: 2px;
}

::selection {
  background: rgba(57, 255, 20, .3);
  color: #fff;
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start !important;
  }

  .topbar .linux-location,
  .topbar .linux-map {
    order: 10;
    width: 100%;
    margin: .35rem 0 0 !important;
  }

  body > .linux-location {
    position: relative;
    top: auto;
    left: auto;
    margin: .65rem;
  }

  .hero {
    margin: .8rem !important;
  }

  .matrix-home .hero {
    margin: 0 .8rem !important;
  }
}

@media (orientation: portrait) {
  html,
  body {
    min-height: 100svh !important;
    overflow-x: hidden !important;
  }

  body {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: .85rem !important;
    overflow-y: auto !important;
  }

  body:has(> .hero) {
    overflow-y: auto !important;
  }

  body > .linux-location {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto .75rem !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  .matrix-rain-canvas {
    width: 100% !important;
    height: 100svh !important;
  }

  .matrix-home {
    justify-content: center !important;
  }

  .hero,
  .card,
  .login-box {
    width: 100% !important;
    max-width: 28rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero {
    padding: 1.6rem 1rem !important;
  }

  .matrix-home .hero {
    margin: auto 0 !important;
  }

  .hero .logo {
    font-size: 2.55rem !important;
    line-height: 1.04 !important;
  }

  .card,
  .login-box {
    padding: 1.35rem 1rem !important;
    overflow: visible !important;
  }

  .brand .logo {
    font-size: 1.7rem !important;
    line-height: 1.08 !important;
  }

  .hero .linux-map,
  .card .linux-map {
    width: 100% !important;
    max-width: 18rem !important;
    margin: 0 auto 1rem !important;
    white-space: normal !important;
  }

  .actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: .75rem !important;
  }

  .actions .btn,
  button,
  .btn,
  input,
  textarea,
  select {
    min-height: 3rem !important;
  }

  input,
  textarea,
  select {
    font-size: 1rem !important;
  }

  .tabs {
    width: 100% !important;
  }

  .tab {
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (orientation: portrait) and (max-width: 360px) {
  body {
    padding: .65rem !important;
  }

  .hero,
  .card,
  .login-box {
    max-width: 100% !important;
  }

  .hero .logo {
    font-size: 2.22rem !important;
  }

  .brand .logo {
    font-size: 1.45rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* Phone/tablet layout: one scrolling page, compact navigation, touch-sized controls. */
.snap-menu-toggle{display:none}
@media(max-width:1024px){
 html,html.matrix-files-root{height:auto!important;min-height:100%!important;overflow-x:clip!important;overflow-y:auto!important;scrollbar-gutter:auto!important}
 body,body.matrix-files{display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:100dvh!important;padding:0!important;overflow:visible!important;font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;background:#020c06!important}
 *,*::before,*::after{box-sizing:border-box}
 body::before,body::after,.matrix-rain-canvas,.linux-location,.linux-map,.hero::after,.bg-grid{display:none!important}
 .hero,.card,.login-box,.container,.controls-card,.stream-shell,.player-shell{max-width:100%!important;min-width:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;animation:none!important}
 .topbar,.matrix-files .topbar{position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:100%!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 12px!important;margin:0!important;background:#06180ef5!important;backdrop-filter:none!important;animation:none!important;z-index:120!important}
 .topbar>.logo{font-size:21px!important;line-height:1.3!important;letter-spacing:-.5px!important;min-height:44px;display:flex;align-items:center;text-shadow:none!important}
 .snap-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:44px!important;padding:9px 14px!important;border:1px solid #3e7750!important;border-radius:8px!important;background:#102a1a!important;color:#d8ffe0!important;font:600 15px system-ui!important;cursor:pointer}
 .topbar.snap-mobile-nav-enabled>.nav,.topbar.snap-mobile-nav-enabled>.user-info{display:none!important;width:100%!important;min-width:0!important;margin:0!important;gap:8px!important;padding:8px 0 2px!important;flex-wrap:wrap!important}
 .topbar.snap-mobile-nav-open>.nav,.topbar.snap-mobile-nav-open>.user-info{display:flex!important}
 .topbar .nav>a,.topbar .user-info>a,.topbar .logout{display:inline-flex!important;justify-content:center;align-items:center;min-height:44px!important;padding:10px 12px!important;font:600 14px system-ui!important;text-shadow:none!important;white-space:normal!important;overflow-wrap:anywhere;flex:1 1 110px;margin:0!important}
 .topbar .user-info .status-wrap{max-width:100%;min-height:44px}.topbar .user-info #username{max-width:100%;overflow-wrap:anywhere}
 .container,.matrix-files .container{width:100%!important;margin:0!important;padding:18px 12px 28px!important;min-width:0!important}
 .hero,.matrix-home .hero{width:calc(100% - 24px)!important;max-width:440px!important;margin:24px auto!important;padding:32px 18px!important;border-radius:14px!important}
 .hero .logo{font-size:clamp(30px,9vw,42px)!important;letter-spacing:-1px!important;white-space:normal!important}.hero .tagline{font:15px/1.6 system-ui!important;overflow-wrap:anywhere}
 .login-box,body>.card{width:calc(100% - 24px)!important;margin:20px auto!important;padding:22px 16px!important}.brand{max-width:100%!important}
 .toolbar,.controls-header,.ctrl-row,.upload-row,.title-row{flex-wrap:wrap!important;gap:10px!important;min-width:0!important}.toolbar h1{flex:1 0 100%!important;font-size:24px!important}
 .grid,.stream-grid,.controls-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;width:100%!important;min-width:0!important}
 .file-card{width:100%!important;min-width:0!important;transform:none!important;animation:none!important}.file-card .thumb{aspect-ratio:16/10!important}.file-card .check{width:36px!important;height:36px!important}.file-card .file-name{overflow-wrap:anywhere}
 .upload-zone{padding:20px 14px!important;min-width:0!important}.upload-fname{max-width:100%;overflow-wrap:anywhere}.upload-row>label{width:100%;justify-content:center}
 button,.btn,.tab,.logout,label.btn{min-height:44px!important;touch-action:manipulation}.btn:hover,button:hover,a:hover{transform:none!important;filter:none!important}
 input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important;max-width:100%!important;min-width:0!important}input[type=checkbox],input[type=radio]{min-height:22px!important;width:22px!important;height:22px!important;flex-shrink:0}
 .server-url,code,.stream-key{overflow-wrap:anywhere!important;word-break:break-word!important;white-space:normal!important}.title-row input{flex:1 1 180px!important;width:100%!important}.ctrl-check{display:flex;align-items:center;gap:10px}
 video{width:100%!important;max-width:100%!important;height:auto;max-height:65dvh;object-fit:contain}.player-layout,.stream-layout{display:flex!important;flex-direction:column!important;min-width:0!important}
 .modal,.modal-content{max-width:calc(100vw - 20px)!important;max-height:90dvh!important;overflow:auto!important}.bulk-bar{max-width:calc(100vw - 16px)!important;flex-wrap:wrap!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
 #cwWidget.cw-widget{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;top:auto!important;width:calc(100% - 16px)!important;max-width:none!important;height:calc(100dvh - 84px)!important;max-height:calc(100dvh - 84px)!important;resize:none!important;backdrop-filter:none!important}.cw-body,.cw-chat,.cw-msgs{min-height:0!important}.cw-compose input{min-width:0!important;width:0;flex:1}.cw-head button,.cw-ch button{min-width:44px!important;min-height:44px!important}
 .site-rgb-download{animation:none!important;box-shadow:none!important}a,button{ -webkit-tap-highlight-color:rgba(57,255,20,.15)}
}
@media(prefers-reduced-motion:reduce){.matrix-rain-canvas{display:none!important}}
@media(max-width:1024px){
 :root{--terminal-font:system-ui,-apple-system,"Segoe UI",sans-serif!important;--text-muted:#a0c5aa!important}
 body{animation:none!important;filter:none!important;transform:none!important;opacity:1!important}
 h1,h2,h3,p,label,.empty-msg{font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;text-shadow:none!important}
 .topbar>.logo::before{display:none!important}
 .topbar .nav>a{border-radius:8px!important;line-height:1.35!important}
 .stream-card,.panel,.account-card,.file-card,.video-card,.sidebar,.chat-layout,input,textarea,select{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:none!important}
 .container h2{font-size:21px!important;line-height:1.4!important}
}@media(max-width:1024px){
 body{margin:0!important;text-shadow:none!important}
 .converter{grid-template-columns:minmax(0,1fr)!important}.dropzone{min-height:220px!important;padding:24px 14px!important}.dropzone,.side,.result{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .chat-layout{height:calc(100dvh - 65px)!important;min-height:380px;flex-direction:column!important;overflow:hidden!important}
 .chat-layout>.sidebar{width:100%!important;max-height:30%;min-height:100px!important;border-right:0!important;border-bottom:1px solid var(--border)}
 .chat-layout>.chat-main{flex:1!important;min-height:0!important;min-width:0!important}.chat-layout .compose,.chat-layout .compose-wrap{min-width:0!important;flex-wrap:wrap}.chat-layout .compose input{min-width:0!important}
 .topbar.snap-mobile-nav-open{max-height:70dvh;overflow:auto}
}@media(max-width:1024px){
 html.matrix-terminal body>.topbar{position:sticky!important}
 html.matrix-terminal body>.container{padding-top:18px!important}
 html.matrix-terminal body{scrollbar-gutter:auto!important;overflow:visible!important}
 html.matrix-terminal .upload-zone::before,html.matrix-terminal .upload-zone::after,html.matrix-terminal .upload-icon{display:none!important}
 #cwWidget.cw-widget{background:#07190e!important;border-radius:12px!important;box-shadow:0 6px 24px #0009!important;font-family:system-ui,sans-serif!important}
 #cwWidget .cw-body,#cwWidget .cw-head,#cwWidget .cw-contact,#cwWidget .cw-compose{background:#07190e!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .chat-layout>.main-chat{flex:1!important;min-height:0!important;min-width:0!important;width:100%!important}
}
@media(max-width:1024px){
 .chat-layout{position:relative!important;min-height:0!important}
 .chat-layout>.sidebar{position:absolute!important;inset:0!important;height:100%!important;max-height:none!important}
 .chat-layout>.main-chat{position:absolute!important;inset:0!important;display:none!important;background:#07190e!important}
 .chat-layout.show-chat>.sidebar{display:none!important}.chat-layout.show-chat>.main-chat{display:flex!important}
 .chat-layout .back-btn{display:flex!important;align-items:center;justify-content:center;min-width:44px!important}
 .sidebar-header .refresh-btn{min-width:44px!important}.chat-layout .messages{min-height:0!important;overflow-y:auto!important}
 .chat-layout .compose{flex-wrap:nowrap!important}.chat-layout .compose textarea{flex:1!important;min-width:0!important}
 .chat-layout .compose-tools{display:flex;flex-wrap:wrap;gap:8px}.chat-layout .compose-tools label{min-height:44px;display:flex;align-items:center}
}
@media(max-width:1024px){
 .topbar .jcui-star{position:static!important;inset:auto!important;transform:none!important;min-width:44px!important;width:auto!important;height:44px!important;padding:8px 12px!important;box-shadow:none!important;animation:none!important}
 .topbar .jcui-star::after{content:'Theme';margin-left:8px;font:600 14px system-ui}.topbar .jcui-star-symbol{font-size:20px!important;animation:none!important}.topbar .jcui-particles{display:none!important}
 .chat-layout .chat-header,.chat-layout .compose-wrap{flex-shrink:0}.chat-layout .chat-header .chat-user{color:#d8ffe0!important}
}
@media(max-width:1024px){
 html.matrix-terminal body>#pageLoader{position:fixed!important;inset:0!important;z-index:1000!important}
 html.matrix-terminal body>#pageLoader.done{display:none!important}
 body.page-loading>.topbar,body.page-loading>.container{opacity:1!important;filter:none!important;transform:none!important}
 #uploadThrobber{display:none!important}#uploadZone.uploading #uploadThrobber{display:block!important}
 #cwWidget.cw-widget{animation:none!important;transition:none!important;filter:none!important;min-width:0!important;min-height:0!important}
}
@media(min-width:1025px){
 .topbar{flex-wrap:wrap!important}.topbar .nav,.topbar .user-info{flex-wrap:wrap!important;min-width:0;max-width:100%}
}

/* Remove the floating Custom UI launcher. */
.jcui-star,.jcui-particles{display:none!important;pointer-events:none!important}