/* =========================================================
   SECURELINK
   READABLE RESPONSIVE DESIGN
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(66,217,255,0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(155,124,255,0.08),
            transparent 32%
        ),
        #080b16;

    color: #eef3ff;

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}


/* =========================================================
   MAIN APPLICATION
   ========================================================= */

.app {
    min-height: 100vh;

    display: flex;

    opacity: 1;

    transform: translateX(0);

    transition:
        transform 0.8s ease,
        opacity 0.6s ease;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    width: 235px;

    min-height: 100vh;

    position: fixed;

    left: 0;
    top: 0;

    padding: 26px 16px;

    display: flex;

    flex-direction: column;

    background:
        rgba(9,13,27,0.97);

    border-right:
        1px solid
        rgba(255,255,255,0.055);

    z-index: 10;
}

.brand {
    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        5px 8px 30px;
}

.brand-logo {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #42d9ff,
            #9b7cff
        );

    color: #07101d;

    font-size: 13px;

    font-weight: 900;
}

.brand h1 {
    font-size: 19px;

    line-height: 1.2;
}

.brand span {
    display: block;

    margin-top: 4px;

    color: #7c879f;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navigation {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.nav-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 13px;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: #8994ad;

    cursor: pointer;

    text-align: left;

    font-size: 14px;

    transition:
        all 0.25s ease;
}

.nav-item:hover {
    background:
        rgba(255,255,255,0.035);

    color: #dbe7ff;
}

.nav-item.active {
    background:
        rgba(66,217,255,0.07);

    color: #42d9ff;

    border:
        1px solid
        rgba(66,217,255,0.08);
}

.nav-icon {
    width: 20px;

    text-align: center;

    font-size: 16px;
}


/* =========================================================
   SIDEBAR STATUS
   ========================================================= */

.sidebar-bottom {
    margin-top: auto;
}

.system-status {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px;

    border-radius: 9px;

    background:
        rgba(255,255,255,0.025);
}

.status-indicator {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #666;

    transition:
        all 0.3s ease;
}

.system-status strong {
    display: block;

    font-size: 12px;
}

.system-status small {
    display: block;

    margin-top: 3px;

    color: #69758e;

    font-size: 10px;
}

.version {
    margin-top: 13px;

    color: #4d586f;

    text-align: center;

    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================================
   MAIN
   ========================================================= */

.main {
    width:
        calc(100% - 235px);

    margin-left: 235px;

    min-height: 100vh;

    padding:
        0 28px;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}

.eyebrow {
    color: #42d9ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;
}

.topbar h2 {
    margin-top: 6px;

    font-size: 23px;

    font-weight: 650;
}

.top-security {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #7f8aa2;

    font-size: 12px;
}

.online-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #666;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        350px;

    gap: 20px;

    padding-top: 20px;
}


/* =========================================================
   CHAT
   ========================================================= */

.chat-section {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 13px;
}


/* =========================================================
   CONNECTION CARD
   ========================================================= */

.connection-card {
    padding: 18px;

    border:
        1px solid
        rgba(66,217,255,0.10);

    border-radius: 13px;

    background:
        rgba(15,20,38,0.75);
}

.card-title {
    display: flex;

    justify-content: space-between;

    margin-bottom: 14px;
}

.section-label {
    color: #77829a;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 1.2px;
}

.card-title h3 {
    margin-top: 5px;

    font-size: 17px;
}

.connection-fields {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    gap: 9px;

    align-items: end;
}

.field label {
    display: block;

    margin-bottom: 6px;

    color: #77829a;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.9px;
}

.field input {
    width: 100%;

    height: 42px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 7px;

    outline: none;

    background:
        rgba(5,9,20,0.65);

    color: #e8efff;

    font-size: 14px;
}

.field input:focus {
    border-color:
        rgba(66,217,255,0.4);
}

.connect-button {
    height: 42px;

    padding:
        0 15px;

    border: 0;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #42d9ff,
            #9b7cff
        );

    color: #07101d;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

.chat-header {
    min-height: 66px;

    padding:
        11px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border:
        1px solid
        rgba(255,255,255,0.055);

    border-radius: 11px;

    background:
        rgba(14,19,36,0.78);
}

.friend-info {
    display: flex;

    align-items: center;

    gap: 10px;
}

.avatar {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        rgba(66,217,255,0.08);

    border:
        1px solid
        rgba(66,217,255,0.13);

    color: #42d9ff;

    font-size: 12px;

    font-weight: 800;
}

.friend-info h3 {
    font-size: 14px;
}

.contact-status {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 4px;

    color: #738099;

    font-size: 10px;
}

.contact-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #666;
}

.encryption-badge {
    padding:
        7px 9px;

    border-radius: 6px;

    background:
        rgba(66,217,255,0.04);

    color: #7c879f;

    font-size: 10px;
}

.encryption-badge span {
    color: #58e6a8;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.messages {
    height: 370px;

    padding: 18px;

    overflow-y: auto;

    border:
        1px solid
        rgba(255,255,255,0.05);

    border-radius: 11px;

    background:
        rgba(9,13,27,0.65);
}

.welcome-card {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

    color: #737e96;
}

.welcome-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 11px;

    border-radius: 12px;

    background:
        rgba(66,217,255,0.05);

    font-size: 20px;
}

.welcome-card h3 {
    color: #b6c1d8;

    font-size: 16px;
}

.welcome-card p {
    max-width: 330px;

    margin-top: 7px;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.message {
    max-width: 72%;

    margin-bottom: 10px;

    padding:
        10px 12px;

    border-radius: 9px;

    font-size: 15px;

    line-height: 1.5;

    animation:
        messageIn
        0.3s
        ease;
}

@keyframes messageIn {

    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.message.sent {
    margin-left: auto;

    background:
        rgba(66,217,255,0.08);

    border:
        1px solid
        rgba(66,217,255,0.10);
}

.message-info {
    margin-top: 5px;

    color: #69748c;

    font-size: 10px;
}

.system-message {
    width: fit-content;

    margin:
        8px auto;

    padding:
        5px 9px;

    border-radius: 20px;

    color: #78839b;

    background:
        rgba(155,124,255,0.04);

    font-size: 10px;

    text-align: center;
}


/* =========================================================
   MESSAGE INPUT
   ========================================================= */

.message-area {
    display: flex;

    gap: 8px;
}

.message-area input {
    flex: 1;

    height: 44px;

    min-width: 0;

    padding:
        0 12px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 8px;

    outline: none;

    background:
        rgba(14,19,36,0.85);

    color: #eaf1ff;

    font-size: 15px;
}

.send-button {
    height: 44px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    gap: 9px;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #42d9ff,
            #9b7cff
        );

    color: #07101d;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;
}

.send-button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


/* =========================================================
   ANALYSIS PANEL
   ========================================================= */

.analysis-panel {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.profile-card {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border:
        1px solid
        rgba(255,255,255,0.05);

    border-radius: 11px;

    background:
        rgba(14,19,36,0.76);
}

.profile-avatar {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #42d9ff,
            #9b7cff
        );

    color: #07101d;

    font-size: 12px;

    font-weight: 900;
}

.profile-label {
    display: block;

    color: #66718a;

    font-size: 9px;

    letter-spacing: 1px;
}

.profile-card strong {
    display: block;

    margin-top: 3px;

    font-size: 13px;
}

.profile-card small {
    color: #69748c;

    font-size: 10px;
}


/* =========================================================
   COMMON CARDS
   ========================================================= */

.security-card,
.side-transmission,
.analysis-card {
    padding: 14px;

    border:
        1px solid
        rgba(255,255,255,0.05);

    border-radius: 11px;

    background:
        rgba(14,19,36,0.76);
}

.analysis-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #77829a;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 1px;
}

.shield,
.analysis-symbol {
    color: #42d9ff;

    font-size: 13px;
}


/* =========================================================
   SECURITY
   ========================================================= */

.security-main {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;
}

.security-icon {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        rgba(88,230,168,0.07);

    color: #58e6a8;

    font-size: 13px;
}

.security-main strong {
    font-size: 13px;
}

.security-main p {
    margin-top: 3px;

    color: #738099;

    font-size: 10px;
}

.parameters {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-top: 11px;
}

.parameter {
    padding: 8px;

    border-radius: 7px;

    background:
        rgba(255,255,255,0.022);
}

.parameter span {
    display: block;

    color: #657088;

    font-size: 9px;

    font-weight: 700;
}

.parameter strong {
    display: block;

    margin-top: 3px;

    color: #b7c3da;

    font-size: 10px;
}


/* =========================================================
   SIDE TRANSMISSION
   ========================================================= */

.live-label {
    color: #42d9ff;

    font-size: 9px;

    animation:
        livePulse
        1.2s
        infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.side-flow {
    margin-top: 12px;
}

.side-step {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 6px 0;
}

.side-step > span {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background:
        rgba(66,217,255,0.04);

    color: #42d9ff;

    font-size: 8px;

    font-weight: 800;
}

.side-step small {
    display: block;

    color: #68748c;

    font-size: 8px;

    letter-spacing: 0.8px;
}

.side-step strong {
    display: block;

    max-width: 245px;

    margin-top: 3px;

    color: #b4c0d7;

    font-size: 10px;

    line-height: 1.35;

    word-break: break-word;
}

.side-cipher {
    color: #b7a8ff !important;

    font-family:
        "Courier New",
        monospace;

    max-height: 42px;

    overflow: hidden;
}

.side-connector {
    margin-left: 9px;

    height: 11px;

    color: #7769b6;

    font-size: 10px;
}

.side-result {
    margin-top: 7px;

    padding: 10px;

    border-radius: 8px;

    background:
        rgba(88,230,168,0.035);

    border:
        1px solid
        rgba(88,230,168,0.10);
}

.side-result small {
    display: block;

    color: #68748c;

    font-size: 8px;

    letter-spacing: 1px;
}

.side-result strong {
    display: block;

    margin-top: 4px;

    color: #58e6a8;

    font-size: 13px;

    line-height: 1.4;

    word-break: break-word;
}


/* =========================================================
   CHANNEL ANALYSIS
   ========================================================= */

.metric-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-top: 11px;
}

.metric {
    padding: 9px;

    border-radius: 7px;

    background:
        rgba(255,255,255,0.022);
}

.metric span {
    display: block;

    color: #657088;

    font-size: 9px;
}

.metric strong {
    display: inline-block;

    margin-top: 4px;

    color: #b7c3da;

    font-size: 17px;
}

.metric small {
    color: #657088;

    font-size: 8px;
}

.analysis-note {
    display: flex;

    gap: 7px;

    margin-top: 8px;

    padding: 8px;

    color: #68748c;

    background:
        rgba(66,217,255,0.02);

    border-radius: 7px;
}

.analysis-note p {
    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    display: flex;

    justify-content: space-between;

    padding:
        17px 2px;

    color: #505b72;

    font-size: 9px;
}


/* =========================================================
   FULL SCREEN TRANSMISSION
   ========================================================= */

.transmission-screen {
    position: fixed;

    inset: 0;

    z-index: 1000;

    width: 100vw;
    height: 100vh;

    display: none;

    align-items: center;

    justify-content: center;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(66,217,255,0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(155,124,255,0.09),
            transparent 30%
        ),
        #080b16;

    opacity: 0;

    transform:
        translateX(100%);

    transition:
        opacity 0.5s ease,
        transform 0.9s
        cubic-bezier(
            0.77,
            0,
            0.18,
            1
        );
}

.transmission-screen.show {
    display: flex;

    opacity: 1;

    transform:
        translateX(0);
}

.transmission-screen.exit {
    opacity: 0;

    transform:
        translateX(-100%);
}


/* =========================================================
   AMBIENT
   ========================================================= */

.ambient {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    opacity: 0.35;
}

.ambient-one {
    width: 300px;
    height: 300px;

    top: 5%;
    left: 8%;

    background:
        rgba(66,217,255,0.10);

    animation:
        ambientOne
        8s
        ease-in-out
        infinite
        alternate;
}

.ambient-two {
    width: 330px;
    height: 330px;

    right: 5%;
    bottom: 5%;

    background:
        rgba(155,124,255,0.10);

    animation:
        ambientTwo
        10s
        ease-in-out
        infinite
        alternate;
}

@keyframes ambientOne {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(80px,50px);
    }
}

@keyframes ambientTwo {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(-80px,-50px);
    }
}


/* =========================================================
   INTRO
   ========================================================= */

.intro-content {
    position: relative;

    z-index: 2;

    width:
        min(
            700px,
            92vw
        );

    padding:
        28px 22px;

    text-align: center;
}

.intro-brand {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 17px;
}

.intro-logo {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #42d9ff,
            #9b7cff
        );

    color: #07101d;

    font-size: 13px;

    font-weight: 900;

    box-shadow:
        0 0 30px
        rgba(66,217,255,0.18);
}

.intro-brand h1 {
    text-align: left;

    font-size: 20px;
}

.intro-brand span {
    display: block;

    margin-top: 3px;

    color: #758099;

    font-size: 8px;

    letter-spacing: 1.3px;
}

.intro-title {
    margin-bottom: 16px;
}

.intro-title > span {
    color: #42d9ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.intro-title h2 {
    margin-top: 6px;

    font-size: 25px;

    font-weight: 650;
}

.intro-title p {
    margin-top: 5px;

    color: #71809a;

    font-size: 11px;
}


/* =========================================================
   HERO PIPELINE
   ========================================================= */

.hero-pipeline {
    display: flex;

    flex-direction: column;

    align-items: center;
}

.hero-step {
    width:
        min(
            540px,
            90vw
        );

    display: flex;

    align-items: center;

    gap: 10px;

    opacity: 0.18;

    transform:
        translateY(12px)
        scale(0.98);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.hero-step.active {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.hero-step.completed {
    opacity: 0.65;

    transform:
        translateY(0)
        scale(1);
}

.hero-number {
    width: 31px;
    height: 31px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background:
        rgba(66,217,255,0.055);

    border:
        1px solid
        rgba(66,217,255,0.12);

    color: #42d9ff;

    font-size: 9px;

    font-weight: 800;
}

.hero-step.active .hero-number {
    background:
        rgba(66,217,255,0.15);

    border-color:
        rgba(66,217,255,0.55);

    box-shadow:
        0 0 18px
        rgba(66,217,255,0.18);

    animation:
        heroPulse
        1s
        infinite;
}

@keyframes heroPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   HERO CARD
   ========================================================= */

.hero-card {
    flex: 1;

    padding:
        10px 13px;

    text-align: left;

    border-radius: 9px;

    background:
        rgba(16,21,40,0.82);

    border:
        1px solid
        rgba(255,255,255,0.06);

    transition:
        all 0.4s ease;
}

.hero-step.active .hero-card {
    border-color:
        rgba(66,217,255,0.24);

    box-shadow:
        0 0 28px
        rgba(66,217,255,0.06);
}

.hero-card span {
    display: block;

    color: #74809a;

    font-size: 8px;

    font-weight: 750;

    letter-spacing: 1px;
}

.hero-card strong {
    display: block;

    margin-top: 4px;

    color: #e7efff;

    font-size: 14px;
}

.hero-card small {
    display: block;

    margin-top: 3px;

    color: #6e7991;

    font-size: 9px;
}

#heroOriginalData {
    color: #42d9ff;

    font-size: 15px;

    word-break: break-word;
}

.encryption-hero strong {
    color: #9b7cff;

    font-size: 15px;
}

.cipher-hero strong {
    color: #b7a8ff;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    line-height: 1.45;

    word-break: break-all;

    max-height: 45px;

    overflow: hidden;
}

.authentication-hero strong {
    color: #58e6a8;
}


/* =========================================================
   FINAL
   ========================================================= */

.final-number {
    color: #58e6a8;

    background:
        rgba(88,230,168,0.08);

    border-color:
        rgba(88,230,168,0.22);
}

.hero-final.active .final-number {
    box-shadow:
        0 0 24px
        rgba(88,230,168,0.24);

    animation:
        finalPulse
        1.1s
        infinite;
}

@keyframes finalPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.final-hero {
    border-color:
        rgba(88,230,168,0.14);
}

.final-hero strong {
    color: #58e6a8;

    font-size: 18px;

    word-break: break-word;

    animation:
        finalReveal
        0.7s
        ease;
}

@keyframes finalReveal {

    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   ARROWS
   ========================================================= */

.hero-arrow {
    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #7769b6;

    font-size: 13px;

    opacity: 0.22;

    transition:
        all 0.3s ease;
}

.hero-arrow.active {
    opacity: 1;

    animation:
        arrowMove
        0.8s
        infinite;
}

@keyframes arrowMove {

    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(4px);
    }

    100% {
        transform:
            translateY(0);
    }
}


/* =========================================================
   STATUS
   ========================================================= */

.intro-status {
    margin-top: 15px;

    color: #42d9ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.intro-progress {
    width: 280px;

    height: 3px;

    margin:
        8px auto 0;

    border-radius: 5px;

    overflow: hidden;

    background:
        rgba(255,255,255,0.05);
}

.intro-progress span {
    display: block;

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #42d9ff,
            #9b7cff
        );

    transition:
        width 0.5s ease;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .workspace {
        grid-template-columns:
            1fr;
    }

    .analysis-panel {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }

    .profile-card {
        grid-column:
            span 2;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 750px) {

    .sidebar {
        width: 68px;
    }

    .brand > div:last-child,
    .nav-item span:last-child,
    .system-status div,
    .version {
        display: none;
    }

    .brand {
        justify-content: center;
    }

    .nav-item {
        justify-content: center;

        padding:
            12px 8px;
    }

    .main {
        width:
            calc(100% - 68px);

        margin-left: 68px;

        padding:
            0 14px;
    }

    .connection-fields {
        grid-template-columns:
            1fr 1fr;
    }

    .connect-button {
        grid-column:
            span 2;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .main {
        padding:
            0 10px;
    }

    .topbar {
        min-height: 82px;
    }

    .eyebrow {
        font-size: 10px;
    }

    .topbar h2 {
        font-size: 20px;

        line-height: 1.25;
    }

    .top-security {
        font-size: 10px;
    }


    /* Connection */

    .connection-card {
        padding: 15px;
    }

    .section-label {
        font-size: 10px;
    }

    .card-title h3 {
        font-size: 17px;
    }

    .connection-fields {
        grid-template-columns:
            1fr;
    }

    .connect-button {
        grid-column: auto;

        width: 100%;
    }

    .field label {
        font-size: 11px;
    }

    .field input {
        height: 46px;

        font-size: 16px;
    }

    .connect-button {
        height: 46px;

        font-size: 14px;
    }


    /* Chat */

    .chat-header {
        min-height: 70px;

        padding: 10px;
    }

    .avatar {
        width: 39px;
        height: 39px;

        font-size: 13px;
    }

    .friend-info h3 {
        font-size: 15px;
    }

    .contact-status {
        font-size: 10px;
    }

    .encryption-badge {
        font-size: 9px;

        padding:
            6px 7px;
    }


    /* Messages */

    .messages {
        height: 370px;

        padding: 13px;
    }

    .welcome-icon {
        width: 52px;
        height: 52px;

        font-size: 21px;
    }

    .welcome-card h3 {
        font-size: 18px;
    }

    .welcome-card p {
        max-width: 300px;

        font-size: 14px;

        line-height: 1.6;
    }

    .message {
        max-width: 90%;

        padding:
            10px 12px;

        font-size: 16px;

        line-height: 1.5;
    }

    .message-info {
        font-size: 10px;
    }

    .system-message {
        font-size: 11px;

        padding:
            6px 10px;
    }


    /* Message input */

    .message-area {
        gap: 7px;
    }

    .message-area input {
        height: 49px;

        font-size: 16px;

        padding:
            0 12px;
    }

    .send-button {
        height: 49px;

        padding:
            0 15px;

        font-size: 14px;
    }


    /* Analysis */

    .analysis-panel {
        grid-template-columns:
            1fr;
    }

    .profile-card {
        grid-column:
            auto;
    }

    .profile-label {
        font-size: 10px;
    }

    .profile-card strong {
        font-size: 15px;
    }

    .profile-card small {
        font-size: 11px;
    }

    .analysis-card-header {
        font-size: 10px;
    }

    .security-main strong {
        font-size: 15px;
    }

    .security-main p {
        font-size: 11px;

        line-height: 1.5;
    }

    .parameter span {
        font-size: 9px;
    }

    .parameter strong {
        font-size: 11px;
    }

    .live-label {
        font-size: 9px;
    }

    .side-step small {
        font-size: 9px;
    }

    .side-step strong {
        font-size: 11px;

        line-height: 1.4;
    }

    .side-result small {
        font-size: 9px;
    }

    .side-result strong {
        font-size: 15px;

        line-height: 1.4;
    }

    .metric span {
        font-size: 10px;
    }

    .metric strong {
        font-size: 18px;
    }

    .metric small {
        font-size: 9px;
    }

    .analysis-note p {
        font-size: 10px;

        line-height: 1.5;
    }


    /* Footer */

    footer {
        font-size: 9px;

        flex-direction: column;

        gap: 5px;
    }


    /* =====================================================
       FULL SCREEN TRANSMISSION — MOBILE
       ===================================================== */

    .transmission-screen {
        align-items: flex-start;

        overflow-y: auto;
    }

    .intro-content {
        width: 100%;

        padding:
            24px 12px 30px;
    }

    .intro-brand {
        margin-bottom: 18px;
    }

    .intro-logo {
        width: 44px;
        height: 44px;

        font-size: 13px;
    }

    .intro-brand h1 {
        font-size: 20px;
    }

    .intro-brand span {
        font-size: 8px;
    }

    .intro-title {
        margin-bottom: 18px;
    }

    .intro-title > span {
        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .intro-title h2 {
        font-size: 24px;

        line-height: 1.25;
    }

    .intro-title p {
        font-size: 12px;

        line-height: 1.5;
    }


    /* Transmission cards */

    .hero-step {
        width: 96vw;

        gap: 8px;
    }

    .hero-number {
        width: 32px;
        height: 32px;

        font-size: 10px;

        border-radius: 9px;
    }

    .hero-card {
        padding:
            10px 12px;

        border-radius: 10px;
    }

    .hero-card span {
        font-size: 9px;
    }

    .hero-card strong {
        font-size: 15px;

        line-height: 1.35;
    }

    .hero-card small {
        font-size: 10px;

        line-height: 1.4;
    }

    #heroOriginalData {
        font-size: 16px;

        line-height: 1.45;
    }

    .encryption-hero strong {
        font-size: 16px;
    }

    .cipher-hero strong {
        font-size: 10px;

        line-height: 1.45;

        max-height: 60px;
    }

    .authentication-hero strong {
        font-size: 15px;
    }

    .final-hero strong {
        font-size: 19px;

        line-height: 1.4;
    }

    .hero-arrow {
        height: 20px;

        font-size: 14px;
    }

    .intro-status {
        font-size: 10px;

        letter-spacing: 1.3px;
    }

    .intro-progress {
        width: 82%;

        height: 3px;

        margin-top: 9px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .sidebar {
        width: 56px;
    }

    .main {
        width:
            calc(100% - 56px);

        margin-left: 56px;

        padding:
            0 7px;
    }

    .topbar h2 {
        font-size: 18px;
    }

    .messages {
        height: 340px;
    }

    .message {
        font-size: 15px;
    }

    .message-area input {
        font-size: 15px;
    }

    .send-button {
        padding:
            0 12px;

        font-size: 13px;
    }

    .intro-content {
        padding:
            20px 9px 25px;
    }

    .intro-title h2 {
        font-size: 21px;
    }

    .hero-card strong {
        font-size: 14px;
    }

    #heroOriginalData {
        font-size: 15px;
    }

    .final-hero strong {
        font-size: 17px;
    }
}