:root {
    --neon-pink: #FF1493;
    --deep-purple: #1A0033;
    --electric-violet: #9D4EDD;
    --cyber-cyan: #00fff2;
    --glass-bg: rgba(4, 0, 10, 0.78);
    --glass-border: rgba(255, 20, 147, 0.4);
    --text-glow: rgba(255, 20, 147, 0.65);
    --mono: "Share Tech Mono", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    background: var(--deep-purple);
    color: #f0e0ff;
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.5;
}

#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.cyber-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(157, 78, 221, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(157, 78, 221, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    animation: grid-drift 24s linear infinite;
}

.nebula-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 35%, rgba(157, 78, 221, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 80% 80%, rgba(255, 20, 147, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, #040008 0%, var(--deep-purple) 45%, #0a0018 100%);
}

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.12) 2px,
        rgba(0, 0, 0, 0.12) 4px
    );
    opacity: 0.45;
    animation: scan-flicker 6s steps(2) infinite;
}

.crt-sweep {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 20, 147, 0.03) 48%,
        rgba(0, 255, 242, 0.05) 50%,
        transparent 52%
    );
    animation: crt-sweep 5s linear infinite;
}

.morse-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 8px 16px;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: rgba(0, 255, 242, 0.35);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    animation: morse-scroll 40s linear infinite;
}

.morse-band {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 10px 20px;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    color: rgba(255, 20, 147, 0.5);
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    animation: morse-scroll 35s linear infinite reverse;
}

.morse-edge {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 22px;
    z-index: 2;
    writing-mode: vertical-rl;
    font-size: 0.5rem;
    letter-spacing: 0.35em;
    color: rgba(157, 78, 221, 0.35);
    overflow: hidden;
    pointer-events: none;
    animation: edge-pulse 3s ease-in-out infinite;
}

.morse-edge--left { left: 6px; }
.morse-edge--right { right: 6px; animation-delay: -1.5s; }

.hex-stream {
    position: fixed;
    z-index: 2;
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    color: rgba(0, 255, 242, 0.3);
    pointer-events: none;
}

.hex-stream--tl { top: 36px; left: 36px; }
.hex-stream--br { bottom: 36px; right: 36px; text-align: right; }

.portal-chamber {
    position: relative;
    z-index: 4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 64px;
}

.portal-chamber--wide {
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 32px;
}

.glass-panel--wide {
    width: min(1280px, calc(100vw - 48px));
    margin: 0 auto;
}

.glass-panel--left,
.panel-body--left {
    text-align: left;
}

.notice {
    max-width: 480px;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 255, 242, 0.35);
    background: rgba(0, 20, 24, 0.6);
    color: rgba(180, 255, 250, 0.9);
    text-align: left;
    font-size: 0.75rem;
}

.notice::before {
    content: "[SYS] ";
    color: var(--cyber-cyan);
}

.glass-panel {
    position: relative;
    width: min(1920px, 100%);
    padding: 0 0 36px;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 0 50px rgba(255, 20, 147, 0.12),
        0 0 100px rgba(157, 78, 221, 0.08),
        inset 0 0 80px rgba(0, 0, 0, 0.4);
    animation: panel-flicker 8s steps(1) infinite;
    overflow: visible;
}

.glass-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.015) 3px,
        rgba(255, 255, 255, 0.015) 4px
    );
    pointer-events: none;
}

.panel-hud {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--neon-pink);
    border-style: solid;
    opacity: 0.7;
    z-index: 2;
}

.panel-hud--tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.panel-hud--tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.panel-hud--bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
.panel-hud--br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 20, 147, 0.25);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-align: left;
}

.terminal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 20, 147, 0.5);
    animation: dot-blink 2s ease-in-out infinite;
}

.terminal-dot:nth-child(2) { animation-delay: 0.3s; background: rgba(157, 78, 221, 0.5); }
.terminal-dot:nth-child(3) { animation-delay: 0.6s; background: rgba(0, 255, 242, 0.5); }

.terminal-label {
    flex: 1;
    color: rgba(240, 224, 255, 0.5);
}

.terminal-status {
    color: var(--cyber-cyan);
    animation: status-blink 1.2s step-end infinite;
}

.terminal-status::before {
    content: "● ";
    color: var(--neon-pink);
}

.panel-body {
    position: relative;
    padding: 36px 28px 28px;
    z-index: 1;
}

.portal-button-wrap--primary {
    position: relative;
    z-index: 5;
    margin-top: 8px;
}

.cyber-type {
    display: inline;
}

.code-feed {
    position: absolute;
    top: 48px;
    right: -8px;
    width: 42%;
    max-height: 70%;
    overflow: hidden;
    opacity: 0.12;
    pointer-events: none;
    text-align: left;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.code-feed-inner {
    margin: 0;
    font-size: 0.55rem;
    line-height: 1.7;
    color: var(--cyber-cyan);
    white-space: pre;
}

.portal-command {
    margin: 0 0 22px;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.75rem, 2.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.55;
    color: rgba(240, 224, 255, 0.88);
    text-transform: uppercase;
    min-height: 1.5em;
}

.portal-command::before {
    content: "CMD// ";
    color: var(--neon-pink);
    opacity: 0.8;
}

.portal-sub {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(240, 224, 255, 0.72);
}

.portal-sub strong {
    color: var(--neon-pink);
    font-weight: 600;
}

.portal-muted {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(157, 78, 221, 0.65);
}

.portal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 20, 147, 0.2);
}

.data-box {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px dashed rgba(255, 20, 147, 0.55);
    background: rgba(255, 20, 147, 0.06);
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--neon-pink);
    text-shadow: 0 0 14px var(--text-glow);
    word-break: break-word;
}

.portal-step {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(157, 78, 221, 0.28);
    background: rgba(0, 0, 0, 0.28);
}

.portal-step strong {
    display: block;
    margin-bottom: 10px;
    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--electric-violet);
}

.portal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.portal-actions--left {
    justify-content: flex-start;
}

.portal-form {
    display: grid;
    gap: 12px;
    margin: 14px 0;
    text-align: left;
}

.portal-form label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(157, 78, 221, 0.8);
}

.portal-form input,
.portal-form textarea,
.portal-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 20, 147, 0.35);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #f0e0ff;
    font-family: var(--mono);
    font-size: 0.82rem;
}

.portal-form input:focus,
.portal-form textarea:focus,
.portal-form select:focus {
    outline: none;
    border-color: var(--cyber-cyan);
    box-shadow: 0 0 12px rgba(0, 255, 242, 0.2);
}

.portal-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2300fff2' d='M1 1l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    padding-right: 32px;
    cursor: pointer;
}

.portal-form select option {
    background: #120014;
    color: #f0e0ff;
}

.portal-form textarea {
    min-height: 88px;
    resize: vertical;
}

.portal-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.portal-grid {
    display: grid;
    gap: 16px;
}

.portal-grid--2 {
    grid-template-columns: 1fr;
}

.portal-grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.portal-section {
    padding: 14px;
    border: 1px solid rgba(157, 78, 221, 0.22);
    background: rgba(0, 0, 0, 0.22);
}

.portal-section h2 {
    margin: 0 0 12px;
    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neon-pink);
}

.span-4 { grid-column: span 12; }
.span-6 { grid-column: span 12; }
.span-8 { grid-column: span 12; }
.span-12 { grid-column: span 12; }

.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    text-align: left;
}


.portal-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(157, 78, 221, 0.18);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.portal-table th {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(157, 78, 221, 0.75);
    width: 20%;
}

.portal-table img {
    width: 40px;
    height: 40px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid rgba(255, 20, 147, 0.35);
}

.portal-pre {
    margin: 0;
    padding: 12px;
    max-height: 320px;
    overflow: auto;
    border: 1px solid rgba(0, 255, 242, 0.2);
    background: rgba(0, 0, 0, 0.45);
    font-size: 0.68rem;
    line-height: 1.5;
    color: rgba(180, 255, 250, 0.8);
}

.read-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 460px;
    overflow: auto;
}

.read-card {
    border: 1px solid rgba(157, 78, 221, 0.28);
    border-left-width: 3px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 12px;
}

.read-card--in {
    border-left-color: var(--cyber-cyan);
}

.read-card--out {
    border-left-color: var(--neon-pink);
}

.read-card--post {
    border-left-color: var(--electric-violet);
}

.read-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.read-card__tag {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(157, 78, 221, 0.9);
}

.read-card--in .read-card__tag { color: var(--cyber-cyan); }
.read-card--out .read-card__tag { color: var(--neon-pink); }

.read-card__who {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.read-card__handle {
    font-size: 0.72rem;
    color: rgba(225, 240, 255, 0.9);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.read-card__handle:hover {
    color: var(--cyber-cyan);
    text-decoration: underline;
}

.read-card__name {
    color: rgba(180, 255, 250, 0.5);
    font-size: 0.66rem;
}

.read-card__time {
    font-size: 0.62rem;
    color: rgba(180, 255, 250, 0.55);
}

.read-card__text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(225, 240, 255, 0.92);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.read-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    font-size: 0.7rem;
    color: rgba(180, 255, 250, 0.75);
}

.read-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.6rem;
    color: rgba(157, 78, 221, 0.6);
}

.read-raw {
    margin-top: 12px;
}

.read-raw summary {
    cursor: pointer;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(157, 78, 221, 0.75);
    margin-bottom: 8px;
}

.read-raw summary:hover {
    color: var(--neon-pink);
}

/* Media attachment field on post / DM forms */
.media-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.media-field__name {
    font-size: 0.7rem;
    color: rgba(180, 255, 250, 0.55);
    overflow-wrap: anywhere;
}

.media-field__name.has-media {
    color: var(--cyber-cyan);
}

.media-field__hint {
    margin: 0;
    font-size: 0.62rem;
}

/* DM inbox: sidebar of conversations + active thread */
.dm-inbox {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
    gap: 14px;
    border: 1px solid rgba(157, 78, 221, 0.22);
    background: rgba(0, 0, 0, 0.25);
    min-height: 320px;
}

.dm-inbox__sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 520px;
    overflow-y: auto;
    border-right: 1px solid rgba(157, 78, 221, 0.22);
    padding: 6px;
}

.dm-inbox__search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 2px 2px 8px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.dm-inbox__search input {
    width: 100%;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(157, 78, 221, 0.35);
    color: rgba(225, 240, 255, 0.92);
    font-size: 0.72rem;
}

.dm-inbox__search input:focus {
    outline: none;
    border-color: var(--cyber-cyan);
}

.dm-inbox__no-match {
    margin: 8px 6px;
    font-size: 0.68rem;
    color: rgba(180, 255, 250, 0.5);
}

.dm-inbox__no-match[hidden] {
    display: none;
}

.dm-inbox__person {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.dm-inbox__person[hidden] {
    display: none;
}

.dm-inbox__unread-dot {
    display: none;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyber-cyan);
    box-shadow: 0 0 6px var(--cyber-cyan);
}

.dm-inbox__person.unread .dm-inbox__unread-dot {
    display: block;
}

.dm-inbox__person.unread .dm-inbox__person-name {
    color: #fff;
    font-weight: 600;
}

.dm-inbox__person.unread .dm-inbox__person-preview {
    color: rgba(225, 240, 255, 0.85);
}

.dm-autorefresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(180, 255, 250, 0.6);
    cursor: pointer;
}

.dm-autorefresh input {
    accent-color: var(--neon-pink);
    cursor: pointer;
}

.dm-inbox__person:hover {
    background: rgba(157, 78, 221, 0.12);
}

.dm-inbox__person.active {
    background: rgba(255, 20, 147, 0.12);
    border-left-color: var(--neon-pink);
}

.dm-inbox__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}

.dm-inbox__avatar img {
    width: 34px;
    height: 34px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid rgba(0, 255, 242, 0.35);
}

.dm-inbox__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 2px;
    background: rgba(157, 78, 221, 0.22);
    border: 1px solid rgba(157, 78, 221, 0.4);
    font-family: "Orbitron", sans-serif;
    font-size: 0.8rem;
    color: var(--cyber-cyan);
}

.dm-inbox__person-body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-inbox__person-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.dm-inbox__person-name {
    font-size: 0.74rem;
    color: rgba(225, 240, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-inbox__person-time {
    flex: 0 0 auto;
    font-size: 0.56rem;
    color: rgba(180, 255, 250, 0.45);
}

.dm-inbox__person-preview {
    font-size: 0.66rem;
    color: rgba(180, 255, 250, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-inbox__threads {
    min-width: 0;
    padding: 6px;
}

.dm-inbox__thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dm-inbox__thread[hidden] {
    display: none;
}

.dm-thread__head {
    border-bottom: 1px solid rgba(157, 78, 221, 0.22);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.dm-thread__who {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.dm-thread__who strong {
    font-size: 0.82rem;
    color: rgba(225, 240, 255, 0.95);
}

.dm-thread__handle {
    font-size: 0.7rem;
    color: var(--cyber-cyan);
    text-decoration: none;
}

.dm-thread__handle:hover {
    text-decoration: underline;
}

.dm-thread__id {
    font-size: 0.6rem;
    color: rgba(157, 78, 221, 0.6);
}

.dm-thread__messages {
    list-style: none;
    margin: 0 0 10px;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.dm-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.dm-msg--in {
    align-self: flex-start;
    align-items: flex-start;
}

.dm-msg--out {
    align-self: flex-end;
    align-items: flex-end;
}

.dm-msg__bubble {
    padding: 8px 11px;
    border: 1px solid rgba(157, 78, 221, 0.3);
    background: rgba(0, 0, 0, 0.4);
}

.dm-msg--in .dm-msg__bubble {
    border-left: 3px solid var(--cyber-cyan);
}

.dm-msg--out .dm-msg__bubble {
    border-right: 3px solid var(--neon-pink);
    background: rgba(255, 20, 147, 0.08);
}

.dm-msg__text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(225, 240, 255, 0.92);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.dm-msg__text--empty {
    color: rgba(180, 255, 250, 0.4);
    font-style: italic;
}

.dm-msg__media {
    display: block;
    max-width: 100%;
    max-height: 280px;
    margin-top: 6px;
    border: 1px solid rgba(0, 255, 242, 0.25);
}

.dm-msg__media--missing {
    font-size: 0.66rem;
    color: rgba(180, 255, 250, 0.4);
    border: none;
}

.dm-msg__time {
    margin-top: 3px;
    font-size: 0.56rem;
    color: rgba(180, 255, 250, 0.45);
}

.dm-thread__reply {
    margin-top: auto;
    border-top: 1px solid rgba(157, 78, 221, 0.22);
    padding-top: 10px;
}

.dm-thread__reply textarea {
    width: 100%;
}

.dm-thread__reply-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .dm-inbox {
        grid-template-columns: 1fr;
    }

    .dm-inbox__sidebar {
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid rgba(157, 78, 221, 0.22);
    }

    .dm-inbox__person {
        flex: 0 0 auto;
        width: auto;
        max-width: 220px;
    }

    .dm-msg {
        max-width: 92%;
    }
}

.profile-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.profile-head .avatar {
    width: 72px;
    height: 72px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid rgba(255, 20, 147, 0.45);
}

.admin-page-content {
    min-width: 0;
}

.admin-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(280px, 0.8fr);
    gap: 16px;
    align-items: start;
}

.admin-registry-panel,
.admin-audit-panel {
    min-width: 0;
}

.portal-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.portal-section-head h2 {
    margin-bottom: 0;
}

.admin-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 12px;
    border: 1px solid rgba(157, 78, 221, 0.28);
    background: rgba(0, 0, 0, 0.28);
    padding: 4px;
}

.admin-tab-button {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(240, 224, 255, 0.68);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-tab-button span {
    color: rgba(0, 255, 242, 0.72);
}

.admin-tab-button.active {
    border-color: rgba(0, 255, 242, 0.45);
    background: rgba(0, 255, 242, 0.08);
    color: #fff;
}

.admin-tab-panel[hidden] {
    display: none;
}

.admin-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-tabs-bar .admin-tabs {
    margin-bottom: 0;
}

.admin-registry-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.admin-registry-search-input {
    width: 220px;
    max-width: 100%;
    min-height: 36px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(157, 78, 221, 0.4);
    color: rgba(240, 224, 255, 0.92);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.admin-registry-search-input::placeholder {
    color: rgba(157, 78, 221, 0.6);
}

.admin-registry-search-input:focus {
    outline: none;
    border-color: var(--cyber-cyan);
    box-shadow: 0 0 12px rgba(0, 255, 242, 0.25);
}

.admin-registry-search-count {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyber-cyan);
    white-space: nowrap;
}

.admin-tab-button.has-matches {
    border-color: rgba(0, 255, 242, 0.45);
}

.admin-tab-button.has-matches span {
    color: var(--cyber-cyan);
}

.admin-tab-button.no-matches {
    opacity: 0.4;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-color: rgba(157, 78, 221, 0.55) rgba(0, 0, 0, 0.3);
}

.admin-account-table {
    min-width: 820px;
}

.admin-account-table .face-col {
    width: 56px;
}

.admin-account-table .control-col {
    width: 112px;
}

.admin-account-table .handle-col { width: 120px; }

.handle-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.handle-link:hover,
.handle-link:focus {
    color: var(--cyber-cyan);
    border-bottom-color: rgba(0, 255, 242, 0.45);
}

.admin-account-table .mark-col { width: 120px; }
.admin-account-table .tier-col { width: 100px; }
.admin-account-table .rebrand-col { width: 140px; }
.admin-account-table .last-seen-col { width: 160px; }

.admin-account-table .portal-button {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.68rem;
    white-space: nowrap;
}

.admin-audit-table {
    min-width: 320px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.upload-button {
    min-height: 44px;
}

.admin-progress {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20;
    width: min(360px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid rgba(0, 255, 242, 0.42);
    background: rgba(0, 10, 16, 0.92);
    color: rgba(210, 255, 252, 0.95);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translate(-50%, -140%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 0 28px rgba(0, 255, 242, 0.16);
}

.admin-progress.active {
    transform: translate(-50%, 0);
    opacity: 1;
}

.admin-progress.error {
    border-color: rgba(255, 68, 102, 0.72);
    color: #ffc8d4;
}

.admin-progress.success {
    border-color: rgba(0, 255, 242, 0.72);
    color: #c8ffef;
}

.admin-progress.success .admin-progress-bar {
    width: 100%;
    animation: none;
}

.admin-progress-track {
    height: 3px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.admin-progress-bar {
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, var(--neon-pink), var(--cyber-cyan));
    animation: admin-progress-slide 0.9s ease-in-out infinite;
}

.error-panel {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(255, 68, 102, 0.5);
    border-left: 3px solid #ff4466;
    background: rgba(80, 0, 20, 0.35);
    color: #ffc8d4;
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: left;
}

.error-panel::before {
    content: "[DENIED] ";
    color: #ff4466;
    font-weight: 700;
}

.warning-panel {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid rgba(201, 160, 0, 0.45);
    border-left: 3px solid #c9a000;
    background: rgba(60, 40, 0, 0.3);
    color: #ffe8a0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.warning-panel::before {
    content: "[WARN] ";
    color: #c9a000;
}

.status-panel--warn {
    border-left: 2px solid #c9a000;
}

.status-panel--warn::before {
    content: "[WARN] ";
    color: #c9a000;
}

.status-ok,
.status-success,
.status-complete {
    color: #5dffb0;
}

.status-fail,
.status-failed {
    color: #ff6688;
}

.status-pending,
.status-blocked_by_x {
    color: #e8c040;
}

.goddess-title {
    position: relative;
    margin: 0 0 24px;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.8rem, 3vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--neon-pink);
    text-shadow: 0 0 24px var(--text-glow);
}

.glitch {
    animation: glitch-skew 3.5s infinite linear alternate-reverse;
}

.glitch.glitch-active,
.glitch-sub.glitch-active {
    animation: glitch-shake 0.15s steps(2) 3;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.glitch::before {
    left: 2px;
    color: var(--electric-violet);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    animation: glitch-clip-1 2s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    color: var(--cyber-cyan);
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    animation: glitch-clip-2 2.5s infinite linear alternate-reverse;
}

.identity-line {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45em;
    margin: 0 0 14px;
    font-size: clamp(0.78rem, 2.4vw, 0.95rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--neon-pink);
    text-shadow: 0 0 12px var(--text-glow);
    min-height: 1.6em;
}

.term-prompt {
    color: var(--cyber-cyan);
    opacity: 0.75;
    flex-shrink: 0;
}

.glitch-sub {
    position: relative;
    text-align: left;
}

.glitch-sub::before,
.glitch-sub::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.glitch-sub.glitch-active::before {
    opacity: 0.8;
    color: var(--electric-violet);
    transform: translate(-2px, 0);
    clip-path: inset(20% 0 50% 0);
}

.glitch-sub.glitch-active::after {
    opacity: 0.8;
    color: var(--cyber-cyan);
    transform: translate(2px, 0);
    clip-path: inset(55% 0 10% 0);
}

.welcome-line {
    margin: 0 0 28px;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    letter-spacing: 0.1em;
    color: rgba(240, 224, 255, 0.7);
    min-height: 1.5em;
}

.welcome-line::before {
    content: "// ";
    color: rgba(157, 78, 221, 0.6);
}

.type-cursor {
    color: var(--cyber-cyan);
    animation: cursor-blink 0.6s step-end infinite;
}

.avatar-ring {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px;
    border-radius: 2px;
    border: 1px solid rgba(255, 20, 147, 0.6);
    padding: 2px;
    box-shadow: 0 0 20px rgba(255, 20, 147, 0.35);
    position: relative;
}

.avatar-ring::before,
.avatar-ring::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid var(--cyber-cyan);
}

.avatar-ring::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.avatar-ring::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

.avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.1) saturate(0.9);
}

.status-panel {
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 1px solid rgba(157, 78, 221, 0.35);
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(240, 224, 255, 0.6);
    text-align: left;
    line-height: 1.7;
}

.status-panel::before {
    content: "[ERR] ";
    color: #ff4466;
}

.status-panel.pending::before,
.status-panel.blocked_by_x::before {
    content: "[WARN] ";
    color: #c9a000;
}

.status-panel.pending,
.status-panel.blocked_by_x {
    border-left: 2px solid #c9a000;
}

.status-panel.failed {
    border-left: 2px solid #ff4466;
}

.portal-button-wrap {
    position: relative;
    display: inline-block;
}

.portal-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 28px;
    border: 1px solid var(--neon-pink);
    background: rgba(255, 20, 147, 0.06);
    color: #fff;
    font-family: var(--mono);
    font-size: clamp(0.72rem, 2vw, 0.82rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 20px rgba(255, 20, 147, 0.2), inset 0 0 20px rgba(255, 20, 147, 0.05);
}

.portal-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 20, 147, 0.22), transparent);
    transform: translateX(-100%);
    animation: button-scan 2.5s ease-in-out infinite;
    pointer-events: none;
}

.portal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 32px rgba(255, 20, 147, 0.45);
    text-shadow: 0 0 8px var(--neon-pink);
}

.portal-button.secondary {
    border-color: rgba(157, 78, 221, 0.55);
    background: rgba(157, 78, 221, 0.08);
    box-shadow: 0 0 14px rgba(157, 78, 221, 0.15);
}

.portal-button.secondary::after {
    background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.2), transparent);
}

.portal-button.danger {
    border-color: rgba(255, 68, 102, 0.65);
    background: rgba(255, 68, 102, 0.08);
    box-shadow: 0 0 14px rgba(255, 68, 102, 0.2);
}

.portal-button--submit {
    border: none;
    font: inherit;
}

.ripple-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 242, 0.5);
    pointer-events: none;
    animation: ripple-expand 1s ease-out forwards;
}

@keyframes grid-drift {
    0% { transform: perspective(500px) rotateX(8deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(8deg) translateY(48px); }
}

@keyframes scan-flicker {
    0%, 97%, 100% { opacity: 0.45; }
    98% { opacity: 0.3; }
}

@keyframes crt-sweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes morse-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes edge-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.55; }
}

@keyframes panel-flicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: 0.92; }
    98% { opacity: 1; }
    99% { opacity: 0.95; }
}

@keyframes dot-blink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes glitch-skew {
    0%, 88%, 100% { transform: skew(0deg); }
    90% { transform: skew(3deg); }
    92% { transform: skew(-2deg); }
}

@keyframes glitch-shake {
    0% { transform: translate(0); }
    25% { transform: translate(-3px, 1px); }
    50% { transform: translate(3px, -1px); }
    75% { transform: translate(-2px, 0); }
    100% { transform: translate(0); }
}

@keyframes glitch-clip-1 {
    0%, 82%, 100% { clip-path: inset(0 0 92% 0); transform: translate(0); }
    84% { clip-path: inset(8% 0 55% 0); transform: translate(-4px, 1px); }
    86% { clip-path: inset(35% 0 30% 0); transform: translate(4px, -1px); }
    88% { clip-path: inset(65% 0 8% 0); transform: translate(-2px, 0); }
}

@keyframes glitch-clip-2 {
    0%, 78%, 100% { clip-path: inset(92% 0 0 0); transform: translate(0); }
    80% { clip-path: inset(50% 0 28% 0); transform: translate(3px, 1px); }
    82% { clip-path: inset(22% 0 58% 0); transform: translate(-4px, -1px); }
    84% { clip-path: inset(6% 0 82% 0); transform: translate(2px, 0); }
}

@keyframes button-scan {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

@keyframes ripple-expand {
    0% { width: 0; height: 0; opacity: 0.8; }
    100% { width: 160px; height: 160px; opacity: 0; }
}

@keyframes admin-progress-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(240%); }
}

@media (min-width: 900px) {
    .portal-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    .span-4 { grid-column: span 4; }
    .span-6 { grid-column: span 6; }
    .span-8 { grid-column: span 8; }
}

@media (max-width: 1180px) {
    .admin-dashboard-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .glass-panel--wide {
        width: min(100%, calc(100vw - 24px));
    }

    .portal-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-tabs {
        width: 100%;
    }

    .admin-tab-button {
        flex: 1;
        padding-inline: 8px;
    }

    .panel-body {
        padding: 28px 18px 8px;
    }

    .code-feed {
        display: none;
    }

    .morse-edge,
    .hex-stream {
        display: none;
    }

    .portal-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .glitch::before,
    .glitch::after {
        display: none;
    }
}