* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #eaf7ff;
    background:
        radial-gradient(circle at top, rgba(0,180,255,0.18), transparent 40%),
        linear-gradient(180deg, #061525 0%, #020812 100%);
    overflow-x: hidden;
}


/* фоновые частицы */

.stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(circle, #8de8ff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 120px 120px, 220px 220px;
    background-position: 0 0, 60px 80px;
    animation: moveStars 40s linear infinite;
}

@keyframes moveStars {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(200px);
    }

}



.hero,
.memory,
.write,
footer {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}



.logo-area {
    text-align: center;
    margin-top: 40px;
}


h1 {

    font-size: 72px;
    margin: 0;

    letter-spacing: 8px;

    color: #9eeaff;

    text-shadow:
        0 0 10px #00bfff,
        0 0 30px rgba(0,191,255,.7);

}


.subtitle {

    margin-top: 10px;

    font-size: 28px;

    color: white;

}



.intro {

    text-align:center;

    margin:40px auto;

    font-size:20px;

    line-height:1.7;

    max-width:700px;

}



.screenshot {

    text-align:center;

    margin:50px 0;

}



.screenshot img {

    max-width:100%;

    border-radius:18px;

    border:1px solid rgba(150,230,255,.35);

    box-shadow:
        0 0 30px rgba(0,180,255,.35),
        0 20px 60px rgba(0,0,0,.6);

    transition:.4s;

}


.screenshot img:hover {

    transform:scale(1.03);

}



.memory,
.write {

    background:
        rgba(255,255,255,.06);

    border:

        1px solid rgba(255,255,255,.12);

    border-radius:25px;

    backdrop-filter:blur(12px);

    margin-bottom:40px;

}



h2 {

    text-align:center;

    font-size:32px;

    color:#9eeaff;

}



.memory-text {

    text-align:center;

    color:#c7e8f5;

    font-size:18px;

}



.empty {

    text-align:center;

    padding:40px;

    color:#9ab7c7;

    font-style:italic;

}



form {

    display:flex;

    flex-direction:column;

    gap:15px;

}



input,


.message-editor {

    width:100%;

    min-height:120px;
    max-height:250px;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(0,0,0,.25);

    color:white;

    font-size:16px;

    line-height:1.5;

    outline:none;

    box-sizing:border-box;

    overflow-y:auto;

}



.message-editor:focus {

    border-color:#00bfff;

    box-shadow:0 0 15px rgba(0,191,255,.4);

}


.message-editor:empty:before {

    content:attr(data-placeholder);

    color:rgba(255,255,255,.5);

}


.chat-smile {

    width:32px;

    height:32px;

    vertical-align:middle;

    display:inline-block;

}


textarea {

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(0,0,0,.25);

    color:white;

    font-size:16px;

    outline:none;

}



textarea {

    min-height:140px;

    resize:vertical;

}



input:focus,
textarea:focus {

    border-color:#00bfff;

    box-shadow:0 0 15px rgba(0,191,255,.4);

}



button {

    padding:16px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    color:white;

    background:

        linear-gradient(135deg,#0099ff,#00d9ff);

    box-shadow:

        0 10px 30px rgba(0,170,255,.35);

    transition:.3s;

}



button:hover {

    transform:translateY(-3px);

}



.hidden {

    position:absolute;

    left:-9999px;

}



footer {

    text-align:center;

    color:#89a8b8;

    padding-bottom:60px;

}



footer div {

    font-size:30px;

    color:#9eeaff;

}



footer small {

    opacity:.6;

}



@media(max-width:600px) {


    h1 {

        font-size:48px;

        letter-spacing:4px;

    }


    .subtitle {

        font-size:22px;

    }


    .intro {

        font-size:17px;

    }


    h2 {

        font-size:26px;

    }

}


.message-card {

    background: rgba(255,255,255,.05);

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

    border-radius:18px;

    padding:22px;

    margin:20px 0;

    animation: showMessage .5s ease;

}


.message-name {

    color:#9eeaff;

    font-size:20px;

    margin-bottom:12px;

    font-weight:600;

}


.message-text {

    font-size:17px;

    line-height:1.6;

    color:#f1fbff;

}


.message-date {

    margin-top:15px;

    font-size:13px;

    color:#8ba8b7;

}



@keyframes showMessage {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



.counter {

    text-align:center;

    color:#9eeaff;

    font-size:22px;

    margin:25px 0 35px;

}



.message-card {

    display:flex;

    gap:18px;

    align-items:flex-start;

}



.avatar {

    min-width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0099ff,#00d9ff);

    color:white;

    font-size:26px;

    font-weight:bold;

    box-shadow:0 0 20px rgba(0,180,255,.4);

}



.message-body {

    flex:1;

}



.message-card {
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.avatar {
    flex-shrink:0;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0099ff,#00d9ff);
    color:white;
    font-size:24px;
    font-weight:700;
    box-shadow:0 0 20px rgba(0,180,255,.4);
}

.message-body {
    flex:1;
}



.logo-area h1 {

    animation: xchatGlow 3s infinite alternate;

}


@keyframes xchatGlow {

    from {

        text-shadow:
        0 0 10px #00bfff,
        0 0 30px rgba(0,191,255,.5);

    }


    to {

        text-shadow:
        0 0 20px #00ffff,
        0 0 60px rgba(0,220,255,.9);

    }

}



.antibot {

    color:#bdeeff;

    font-size:16px;

}



.antibot input {

    margin-top:10px;

}




.random-btn {

    display:block;

    margin:30px auto;

    width:auto;

    padding:12px 25px;

}




.archive-search {

    text-align:center;

    margin:50px auto;

    padding:30px;

}


.archive-search input {

    padding:12px;

    max-width:300px;

}


.archive-search button {

    margin-left:10px;

}


.found {

    margin-top:25px;

    padding:25px;

    border-radius:15px;

    background:rgba(0,150,255,.15);

}


.found-name {

    font-size:22px;

    margin:10px;

}


.not-found {

    margin-top:25px;

    color:#aaa;

}




#xchat-intro {

position:fixed;

inset:0;

background:#020814;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

color:#00d9ff;

font-family:monospace;

font-size:24px;

text-align:center;

opacity:1;

transition:1s;

}


#xchat-intro span {

color:white;

}


#xchat-intro.hide {

opacity:0;

}


.archive-search {

margin:40px auto;

max-width:700px;

}


.archive-box {

padding:30px;

border-radius:20px;

background:rgba(0,120,255,.12);

text-align:center;

}


.find-line {

display:flex !important;

flex-direction:row !important;

justify-content:center;

align-items:center;

gap:10px;

margin-top:20px;

}


.find-line input {

padding:12px;

border-radius:10px;

border:1px solid #00aaff;

}




.terminal {

font-family:monospace;

font-size:22px;

line-height:1.8;

color:#00d9ff;

}


.xlogo {

font-size:70px;

font-weight:bold;

letter-spacing:8px;

margin-bottom:30px;

text-shadow:
0 0 15px #00d9ff,
0 0 40px #0088ff;

}


#xchat-intro {

background:
radial-gradient(circle at center,
#12345a,
#020814 70%);

}




.archive-link {

display:inline-block;

margin-top:20px;

padding:12px 25px;

border-radius:20px;

background:rgba(0,180,255,.2);

color:#fff;

text-decoration:none;

}


.old-user {

padding:8px;

font-size:18px;

}




.old-online {

max-width:850px;

margin:30px auto;

padding:25px;

text-align:center;

background:rgba(0,120,255,.12);

border-radius:20px;

border:1px solid rgba(0,200,255,.25);

}


.online-title {

font-size:24px;

color:#00d9ff;

margin-bottom:15px;

}


.online-users {

font-size:18px;

line-height:1.8;

color:#eee;

}


.online-count {

margin-top:15px;

color:#7dff9b;

font-size:18px;

}




.activity-box {

max-width:700px;

margin:25px auto;

padding:25px;

background:rgba(0,0,0,.25);

border-radius:20px;

font-family:monospace;

}


.activity-title {

color:#00d9ff;

font-size:22px;

margin-bottom:15px;

text-align:center;

}


.activity-line {

padding:8px;

color:#ddd;

border-bottom:1px solid rgba(255,255,255,.05);

}




.fake-online {

max-width:850px;

margin:30px auto;

padding:25px;

text-align:center;

background:rgba(0,140,255,.12);

border-radius:20px;

border:1px solid rgba(0,200,255,.25);

}


.fake-online-title {

font-size:24px;

color:#00e5ff;

margin-bottom:15px;

}


.fake-online-users {

font-size:18px;

line-height:1.8;

color:#eee;

}


.fake-online-count {

margin-top:15px;

color:#80ff9a;

font-size:20px;

}




.users-grid {

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:15px;

margin-top:30px;

}


.user-card {

padding:18px;

border-radius:15px;

background:rgba(0,150,255,.12);

text-align:center;

font-size:18px;

}


.memory {

margin:30px auto;

padding:25px;

text-align:center;

background:rgba(0,255,150,.08);

border-radius:20px;

}


.back {

display:inline-block;

margin:20px;

color:#00d9ff;

text-decoration:none;

}


.pages {

margin:40px;

display:flex;

justify-content:center;

gap:30px;

}


.pages a {

padding:12px 25px;

background:rgba(0,150,255,.2);

border-radius:20px;

color:white;

text-decoration:none;

}




/* DAILY MEMORY */

.daily-memory {
    margin: 30px 0;
    padding: 25px;
    background:
    linear-gradient(145deg,#071b2b,#09283d);
    border-radius:20px;
    box-shadow:
    0 0 25px rgba(0,180,255,.25);
    text-align:center;
}


.daily-memory h2 {
    color:#8de7ff;
    margin-bottom:20px;
}


.daily-grid {
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}


.daily-card {

    width:280px;

    padding:20px;

    background:
    rgba(255,255,255,.05);

    border:1px solid rgba(100,220,255,.25);

    border-radius:16px;

    box-shadow:
    0 0 15px rgba(0,180,255,.15);

}


.daily-title {

    font-size:18px;

    color:#7ee7ff;

    margin-bottom:15px;

}


.daily-name {

    font-size:22px;

    font-weight:bold;

    color:white;

    margin:10px 0;

}


.daily-card p {

    color:#b8cdd8;

    font-size:14px;

}


.vip-preview {

    max-width:120px;

    max-height:120px;

    margin:10px;

    image-rendering:auto;

}



#result {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.5;
}


.result-error {
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255, 80, 80, 0.5);
    color: #ff5c5c;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
}


.result-success {
    background: rgba(0, 200, 120, 0.12);
    border: 1px solid rgba(0, 200, 120, 0.4);
    color: #2ee68a;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 17px;
}



.first-memory {
    position: relative;
    border: 1px solid rgba(0,191,255,.45);
    box-shadow:
        0 0 20px rgba(0,191,255,.25),
        inset 0 0 20px rgba(0,191,255,.08);
}


.first-memory::before {
    content: "⭐ Первое воспоминание XChat";
    position: absolute;
    top: -13px;
    left: 20px;

    background: #071827;
    color: #00bfff;

    padding: 4px 14px;
    border-radius: 20px;

    font-size: 13px;
    font-weight: 600;

}



.smiles img {
    width:32px;
    height:32px;
    cursor:pointer;
    margin:5px;
    vertical-align:middle;
}

.chat-smile {
    width:32px;
    height:32px;
    vertical-align:middle;
}


/* FIX FORM SIZE */

.write input,
.write textarea,
.write .message-editor {

    width:100%;
    min-height:auto;
    height:auto;

    padding:12px 14px;

    font-size:16px;

    box-sizing:border-box;

}


.write input {
    height:48px;
}


.write textarea,
.write .message-editor {

    min-height:120px;

}


.write .antibot input {

    width:120px;
    height:42px;

}


.archive-search input,
.find-line input {

    height:48px;

}


/* FIX ARCHIVE SEARCH */

.archive-search input,
.find-line input {

    width:300px;
    max-width:90%;

    height:46px;

    padding:10px 14px;

    font-size:16px;

    background:rgba(0,0,0,.25);

    color:white;

    box-sizing:border-box;

}


.find-line {

    align-items:center;

}


.find-line button {

    height:46px;

}


.archive-box {

    max-width:700px;

    margin:auto;

}




/* ===== ARCHIVE SEARCH CLEAN ===== */

.archive-search {

    max-width:650px;
    margin:30px auto;
    padding:0;

}


.archive-box {

    padding:20px 25px;
    border-radius:18px;
    background:rgba(0,120,255,.12);
    text-align:center;

}


.archive-box h2 {

    font-size:26px;
    margin:0 0 10px;

}


.archive-box p {

    margin:10px 0 15px;

}


.find-line {

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:15px;

}


#findNick {

    width:260px !important;
    height:45px !important;
    min-height:0 !important;

    padding:10px 14px !important;

    font-size:16px !important;

    color:white !important;

    background:rgba(0,0,0,.35) !important;

    border:1px solid rgba(0,180,255,.5) !important;

    border-radius:10px !important;

    box-sizing:border-box;

}


#findNick:focus,
#findNick:-webkit-autofill,
#findNick:-webkit-autofill:focus {

    color:white !important;

    -webkit-text-fill-color:white !important;

    background:rgba(0,0,0,.45) !important;

    box-shadow:
    0 0 0 1000px rgba(0,0,0,.45) inset !important;

}


.find-line button {

    height:45px;
    padding:10px 25px;

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

}