:root {
    --bg: #0e0b17;
    --panel: rgba(31, 18, 45, .82);
    --purple: #8e24aa;
    --pink: #d83bbd;
    --violet: #3a145e;
    --line: rgba(216, 59, 189, .35);
}

body {
    min-height: 100vh;
    color: #f8f4ff;
    background: radial-gradient(circle at top, rgba(142, 36, 170, .32), transparent 34%), linear-gradient(135deg, #0b0912, var(--bg) 52%, #16071d);
}

.navbar { background: rgba(10, 8, 18, .88); backdrop-filter: blur(14px); }
.border-freak { border-color: var(--line) !important; }
.brand-mark, .pixel-text { letter-spacing: .12em; color: #f3d7ff; text-shadow: 0 0 16px var(--pink); }
.fw-black { font-weight: 900; }
.text-faded { color: #c7b7d6; }

.hero, .glass-card, .auth-card, .spec-card, .empty-state {
    background: linear-gradient(145deg, rgba(39, 23, 59, .92), rgba(17, 13, 29, .92));
    border: 1px solid var(--line);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 0 36px rgba(216, 59, 189, .08);
}

.glass-card, .auth-card, .spec-card, .empty-state { border-radius: 1.5rem; padding: 1.5rem; }
.auth-card { max-width: 460px; }
.spec-card { display: block; color: inherit; transition: transform .18s ease, border-color .18s ease; }
.spec-card:hover { transform: translateY(-3px); border-color: rgba(216, 59, 189, .8); }

.btn-freak {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    box-shadow: 0 0 24px rgba(216, 59, 189, .35);
}
.btn-freak:hover { color: #fff; filter: brightness(1.08); }

.form-control, .form-select {
    color: #fff;
    background-color: rgba(8, 6, 14, .72);
    border-color: var(--line);
}
.form-control:focus, .form-select:focus { color: #fff; background-color: #110b1c; border-color: var(--pink); box-shadow: 0 0 0 .25rem rgba(216, 59, 189, .18); }

.cube-card { max-width: 320px; padding: 2rem; border-radius: 50%; background: radial-gradient(circle, #eee 0 48%, rgba(255,255,255,.08) 49%, transparent 65%); }
.cube-logo { margin: 2rem auto 0; width: 170px; height: 150px; display: grid; place-items: center; font-size: 4.6rem; font-weight: 900; color: #f5ccff; background: linear-gradient(145deg, #b0278d, #40115f); clip-path: polygon(8% 12%, 52% 0, 92% 12%, 92% 84%, 50% 100%, 8% 84%); text-shadow: 5px 5px 0 #220725; box-shadow: inset 0 0 0 10px rgba(255,255,255,.12); }

.status-pill { display: inline-flex; align-items: center; height: 2rem; padding: 0 .8rem; border-radius: 999px; color: #fff; background: rgba(216, 59, 189, .16); border: 1px solid var(--line); white-space: nowrap; }
.unread-pill, .seen-pill { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 .7rem; border-radius: 999px; font-size: .9rem; white-space: nowrap; }
.unread-pill { color: #fff; background: rgba(216, 59, 189, .32); border: 1px solid rgba(216, 59, 189, .75); box-shadow: 0 0 18px rgba(216, 59, 189, .28); }
.seen-pill { color: #c7b7d6; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.freak-progress { height: 1.35rem; background: rgba(255,255,255,.08); }
.freak-progress .progress-bar { background: linear-gradient(90deg, var(--purple), var(--pink)); }
.prewrap { white-space: pre-wrap; }
.alert-freak { color: #fff; background: rgba(142, 36, 170, .42); border: 1px solid var(--line); }
.empty-state { text-align: center; padding: 4rem 1.5rem; }

.chat-box { max-height: 520px; overflow-y: auto; padding: 1rem; border-radius: 1.25rem; background: rgba(6, 5, 11, .35); }
.chat-message { max-width: 82%; margin-bottom: .85rem; padding: .85rem 1rem; border-radius: 1rem 1rem 1rem .25rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); word-break: break-word; }
.chat-own { margin-left: auto; border-radius: 1rem 1rem .25rem 1rem; background: rgba(216, 59, 189, .18); border-color: var(--line); }
.chat-image { display: block; max-width: 100%; max-height: 320px; border-radius: .9rem; border: 1px solid var(--line); object-fit: contain; }
.file-pill { display: inline-flex; align-items: center; padding: .6rem .85rem; border-radius: .85rem; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); text-decoration: none; }
.file-pill::before { content: 'Файл'; margin-right: .5rem; color: #f0b7ff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.messenger-form textarea { resize: vertical; min-height: 58px; }
.timeline { border-left: 1px solid var(--line); margin-left: .35rem; padding-left: 1rem; }
.timeline-item { position: relative; padding-bottom: 1rem; }
.timeline-item::before { content: ''; position: absolute; left: -1.35rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px rgba(216, 59, 189, .8); }
.formatted-text { white-space: normal; }
.formatted-text p { margin-bottom: .7rem; }
.spoiler { color: transparent; background: rgba(255, 255, 255, .18); border: 0; border-radius: .35rem; padding: 0 .25rem; cursor: pointer; user-select: none; }
.spoiler.spoiler-open { color: inherit; background: rgba(216, 59, 189, .22); user-select: text; }
.news-modal { color: #fff; background: linear-gradient(145deg, rgba(39, 23, 59, .98), rgba(17, 13, 29, .98)); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.mini-info-card { height: 100%; padding: 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.browser-help { padding-left: 1.2rem; color: #d8cbe5; }
.browser-help li { margin-bottom: .55rem; }
.news-cover, .news-figure img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 1rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.news-cover { margin-bottom: 1rem; }
.news-heading { margin-top: 1rem; color: #fff; text-shadow: 0 0 14px rgba(216, 59, 189, .35); }
.news-text { margin-bottom: 1rem; }
.news-figure { margin: 1rem 0; }
.news-figure figcaption { margin-top: .5rem; color: #c7b7d6; font-size: .92rem; }
.news-quote { margin: 1rem 0; padding: 1rem; border-left: 4px solid var(--pink); border-radius: .75rem; background: rgba(255, 255, 255, .06); }
.news-list { color: #d8cbe5; }
.news-list li { margin-bottom: .45rem; }
.news-embed { margin-bottom: 1rem; padding: 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); word-break: break-word; }
.news-builder-block { margin-bottom: 1rem; padding: 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.news-settings-panel { top: 6rem; }
.news-preview-box { padding: 1rem; border-radius: 1rem; background: rgba(0, 0, 0, .18); border: 1px dashed var(--line); }
.news-preview-media { display: grid; place-items: center; min-height: 180px; border-radius: 1rem; color: #c7b7d6; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.upload-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; background: rgba(7, 5, 13, .78); backdrop-filter: blur(10px); }
.upload-card { max-width: 420px; width: 100%; padding: 2rem; text-align: center; border-radius: 1.5rem; background: linear-gradient(145deg, rgba(39, 23, 59, .98), rgba(17, 13, 29, .98)); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.security-secret { padding: 1rem; border-radius: 1rem; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); word-break: break-all; }
.device-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.device-row:last-of-type { border-bottom: 0; }
.qr-box { display: inline-flex; padding: .75rem; border-radius: 1rem; background: #fff; }
.qr-box img { width: 220px; height: 220px; }