/* ---------- THEME ---------- */

:root {
    --accent: #8b5cf6;
    --accent-text: #ffffff;
    --accent-soft: rgba(139, 92, 246, 0.12);
    --accent-contrast: #ffffff;

    --background: #09090b;
    --sidebar: #0d0d10;
    --surface: #121216;
    --surface-hover: #18181e;

    --border: #24242b;

    --text: #f4f4f5;
    --text-muted: #71717a;

    --radius: 12px;
}

@font-face {
    font-family: "Omori";
    src: url("omori.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


/* ---------- RESET ---------- */

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

body {
    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    min-height: 100vh;
}


/* ---------- SIDEBAR ---------- */

.sidebar {
    position: fixed;

    width: 230px;
    height: 100vh;

    background: var(--sidebar);
    border-right: 1px solid var(--border);

    padding: 24px 14px;

    display: flex;
    flex-direction: column;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 10px 28px;

    font-size: 17px;
    font-weight: 600;
}

.logo-icon {
    color: var(--accent);
}

nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item,
.settings-button {
    width: 100%;

    border: none;
    border-radius: 8px;

    padding: 11px 12px;

    background: transparent;
    color: var(--text-muted);

    font-size: 14px;
    text-align: left;

    cursor: pointer;

    transition: 0.15s ease;
}

.nav-item:hover,
.settings-button:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.settings-button {
    margin-top: auto;
}


/* ---------- MAIN CONTENT ---------- */

.content {
    margin-left: 230px;

    padding: 50px;

    max-width: 1400px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 55px;
}

.welcome::before {
    content: "";
    display: inline-block;

    width: 5px;
    height: 5px;

    background: var(--accent);
    border-radius: 50%;

    margin-right: 8px;
    vertical-align: middle;
}

.welcome {
    color: var(--text-muted);

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

    letter-spacing: 2px;

    margin-bottom: 8px;
}

h1 {
    font-size: 32px;
    font-weight: 600;
}

h2 {
    font-size: 15px;
    font-weight: 500;

    margin-bottom: 18px;
}


/* ---------- SEARCH ---------- */

.search {
    width: 280px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 9px;

    padding: 11px 15px;

    color: var(--text);

    outline: none;

    transition: 0.15s ease;
}

.search::placeholder {
    color: var(--text-muted);
}

.search:focus {
    border-color: var(--accent);
}


/* ---------- FOLDERS ---------- */

.folder-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(190px, 1fr));

    gap: 14px;
}

.folder-card {
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    padding: 22px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.folder-card:hover .folder-icon {
    border-color: var(--accent);
    background: color-mix(
        in srgb,
        var(--accent) 18%,
        var(--surface)
    );
}

.folder-icon {
    width: 38px;
    height: 38px;

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

    color: var(--accent);

    background: color-mix(
        in srgb,
        var(--accent) 12%,
        transparent
    );

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 25%,
        var(--border)
    );

    border-radius: 9px;

    font-size: 19px;

    margin-bottom: 22px;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.folder-card h3 {
    font-size: 14px;
    font-weight: 500;

    margin-bottom: 5px;
}

.folder-card p {
    color: var(--text-muted);

    font-size: 12px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .sidebar {
        width: 70px;
    }

    .sidebar span {
        display: none;
    }

    .content {
        margin-left: 70px;
        padding: 25px;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .search {
        width: 100%;
    }
}
/* ---------- SETTINGS ---------- */

.settings-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);

    display: flex;
    justify-content: flex-end;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.2s ease;
}

.settings-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.settings-panel {
    width: 380px;
    height: 100%;

    background: #0d0d10;
    border-left: 1px solid var(--border);

    padding: 28px;

    transform: translateX(100%);
    transition: transform 0.18s ease-out;
}

.settings-overlay.open .settings-panel {
    transform: translateX(0);
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 40px;
}

.settings-label {
    color: var(--accent);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;

    margin-bottom: 7px;
}

.settings-header h2 {
    margin: 0;
    font-size: 22px;
}

.close-settings {
    background: transparent;
    border: none;

    color: var(--text-muted);

    font-size: 28px;
    cursor: pointer;
}

.close-settings:hover {
    color: var(--text);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.setting-row h3 {
    font-size: 14px;
    font-weight: 500;

    margin-bottom: 5px;
}

.setting-row p {
    color: var(--text-muted);
    font-size: 12px;
}

#accentPicker {
    width: 42px;
    height: 42px;

    border: none;
    background: transparent;

    cursor: pointer;
}

.reset-theme {
    width: 100%;

    margin-top: 25px;
    padding: 11px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text);

    cursor: pointer;
}

.reset-theme:hover {
    border-color: var(--accent);
}


/* ---------- UPLOAD ---------- */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-button {
    background: var(--accent);
    color: var(--accent-text);

    border: none;
    border-radius: 9px;

    padding: 11px 17px;

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

    cursor: pointer;

    white-space: nowrap;

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

.upload-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.upload-button:active {
    transform: translateY(0);
}
/* ---------- FILES ---------- */

.files-section {
    margin-top: 45px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.section-header h2 {
    margin-bottom: 0;
}

.file-count {
    color: var(--text-muted);
    font-size: 12px;
}

.file-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(200px, 1fr));

    gap: 14px;
}

.empty-files {
    grid-column: 1 / -1;

    min-height: 170px;

    border: 1px dashed var(--border);
    border-radius: var(--radius);

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

    color: var(--text-muted);
}

.empty-icon {
    width: 36px;
    height: 36px;

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

    margin-bottom: 12px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--surface);

    font-size: 18px;
}

.empty-files p {
    color: var(--text);

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

    margin-bottom: 5px;
}

.empty-files span {
    font-size: 12px;
}


/* ---------- FILE CARDS ---------- */

.file-card {
    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease;
}

.file-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.file-preview {
    width: 100%;
    height: 150px;

    background: var(--background);

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

    overflow: hidden;
}

.file-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.file-info {
    padding: 13px;
}

.file-name {
    color: var(--text);

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin-bottom: 5px;
}

.file-details {
    color: var(--text-muted);
    font-size: 11px;
}

/* ---------- FILE PREVIEW ---------- */

.preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

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

    padding: 40px;

    background: rgba(0, 0, 0, 0.72);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.15s ease;
}

.preview-overlay.open {
    opacity: 1;
    pointer-events: auto;
}


.preview-window {
    width: min(1050px, 95vw);
    height: min(700px, 90vh);

    display: flex;
    flex-direction: column;

    background: var(--sidebar);

    border: 1px solid var(--border);
    border-radius: 14px;

    overflow: hidden;

    transform: scale(0.98);

    transition: transform 0.15s ease;
}

.preview-overlay.open .preview-window {
    transform: scale(1);
}


/* HEADER */

.preview-header {
    min-height: 75px;

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

    padding: 18px 22px;

    border-bottom: 1px solid var(--border);
}

.preview-title-area h2 {
    margin: 0;

    max-width: 600px;

    font-size: 16px;
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-label {
    color: var(--text-muted);

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

    letter-spacing: 1.5px;

    margin-bottom: 5px;
}

.close-preview {
    width: 34px;
    height: 34px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text-muted);

    font-size: 22px;

    cursor: pointer;
}

.close-preview:hover {
    color: var(--text);
    border-color: var(--accent);
}


/* CONTENT */

.preview-content {
    min-height: 0;
    flex: 1;

    display: grid;
    grid-template-columns: 1fr 300px;
}


/* IMAGE */

.preview-image-area {
    min-width: 0;
    min-height: 0;

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

    padding: 30px;

    background: var(--background);
}

.preview-image-area img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 6px;
}


/* PROPERTIES */

.preview-sidebar {
    overflow-y: auto;

    padding: 25px;

    border-left: 1px solid var(--border);

    background: var(--surface);
}

.property-heading {
    color: var(--text-muted);

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

    letter-spacing: 1.5px;

    margin-bottom: 18px;
}

.property {
    padding: 12px 0;

    border-bottom: 1px solid var(--border);
}

.property span {
    display: block;

    color: var(--text-muted);

    font-size: 10px;

    margin-bottom: 5px;
}

.property strong {
    display: block;

    color: var(--text);

    font-size: 12px;
    font-weight: 500;

    word-break: break-word;
}


/* MOBILE */

@media (max-width: 750px) {

    .preview-overlay {
        padding: 15px;
    }

    .preview-content {
        grid-template-columns: 1fr;
    }

    .preview-sidebar {
        border-left: none;
        border-top: 1px solid var(--border);
    }

}

.image-heading {
    margin-top: 30px;
}

/* ---------- DRAG & DROP ---------- */

.file-grid {
    position: relative;
}

.drop-message {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    background: rgba(9, 9, 11, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.file-grid.dragging .drop-message {
    opacity: 1;
    visibility: visible;
}

.drop-message-content {
    text-align: center;
}

.drop-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 22px;
}

.drop-message-content strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.drop-message-content span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

.file-grid.dragging {
    border-radius: var(--radius);
    outline: 2px dashed color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 8px;
}

/* ---------- DRAG & DROP ---------- */

.file-grid {
    position: relative;
}

.file-grid.dragging {
    border-radius: var(--radius);

    outline: 2px dashed var(--accent);
    outline-offset: 8px;

    background: color-mix(
        in srgb,
        var(--accent) 5%,
        transparent
    );
}


/* Hidden normally */

.drop-message {
    position: absolute;
    inset: 0;

    z-index: 20;

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

    min-height: 170px;

    border-radius: var(--radius);

    background: rgba(9, 9, 11, 0.94);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
}


/* Only show while dragging */

.file-grid.dragging .drop-message {
    opacity: 1;
    visibility: visible;
}


.drop-message-content {
    text-align: center;
}


.drop-icon {
    width: 45px;
    height: 45px;

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

    margin: 0 auto 12px;

    border-radius: 10px;

    background: var(--accent);
    color: var(--accent-text);

    font-size: 22px;
}


.drop-message-content strong {
    display: block;

    color: var(--text);

    font-size: 14px;
    font-weight: 500;

    margin-bottom: 5px;
}


.drop-message-content span {
    display: block;

    color: var(--text-muted);

    font-size: 11px;
}

/* ---------- FILE TYPE CARDS ---------- */

.file-type-preview {
    flex-direction: column;
    gap: 10px;

    background:
        linear-gradient(
            145deg,
            var(--surface),
            var(--background)
        );
}

.file-type-icon {
    width: 48px;
    height: 48px;

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

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 30%,
        var(--border)
    );

    border-radius: 12px;

    background: color-mix(
        in srgb,
        var(--accent) 10%,
        var(--surface)
    );

    color: var(--accent);

    font-size: 20px;
    font-weight: 500;
}

.file-type-label {
    color: var(--text-muted);

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

    letter-spacing: 1px;
}

/* ======================================================
   CUSTOM AUDIO PLAYER
   ====================================================== */

.audio-preview {
    width: min(480px, 92%);

    display: none;
    flex-direction: column;
    align-items: center;

    padding: 32px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 16px;
}


/* ---------- ARTWORK ---------- */

.audio-artwork {
    position: relative;

    width: 180px;
    height: 180px;

    margin-bottom: 24px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--accent) 12%,
                var(--surface)
            ),
            var(--background)
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.25);
}


/* Real embedded artwork */

#audioArtwork {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: none;
}


/* Default artwork */

.audio-artwork-fallback {
    width: 100%;
    height: 100%;

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

    color: var(--accent);

    font-size: 58px;

    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--accent) 16%,
                transparent
            ),
            transparent 68%
        );
}


/* ---------- TRACK INFORMATION ---------- */

.audio-preview-info {
    width: 100%;

    text-align: center;

    margin-bottom: 25px;
}


.audio-preview-label {
    color: var(--accent);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;

    margin-bottom: 8px;
}


.audio-preview-info h3 {
    max-width: 100%;

    color: var(--text);

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.audio-artist {
    margin-top: 6px;

    color: var(--text-muted);

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------- PROGRESS ---------- */

.audio-progress-area {
    width: 100%;

    margin-bottom: 20px;
}


.audio-progress {
    width: 100%;
    height: 4px;

    display: block;

    appearance: none;
    -webkit-appearance: none;

    background: var(--border);

    border-radius: 999px;

    outline: none;

    cursor: pointer;
}


/* Chrome / Brave */

.audio-progress::-webkit-slider-thumb {
    width: 13px;
    height: 13px;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    border-radius: 50%;

    background: var(--accent);

    cursor: pointer;
}


/* Firefox */

.audio-progress::-moz-range-thumb {
    width: 13px;
    height: 13px;

    border: none;
    border-radius: 50%;

    background: var(--accent);

    cursor: pointer;
}


.audio-times {
    display: flex;
    justify-content: space-between;

    margin-top: 9px;

    color: var(--text-muted);

    font-size: 10px;

    font-variant-numeric: tabular-nums;
}


/* ---------- CONTROLS ---------- */

.audio-controls {
    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 20px;
}


/* Play / Pause */

.audio-play-button {
    width: 48px;
    height: 48px;

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

    padding: 0;

    background: var(--accent);
    color: var(--accent-text);

    border: none;
    border-radius: 50%;

    font-size: 16px;

    cursor: pointer;

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


.audio-play-button:hover {
    transform: scale(1.06);
}


.audio-play-button:active {
    transform: scale(0.96);
}


/* ---------- VOLUME ---------- */

.audio-volume {
    display: flex;
    align-items: center;

    gap: 8px;

    justify-self: start;
}


.audio-volume-icon {
    color: var(--text-muted);

    font-size: 13px;
}


.audio-volume-slider {
    width: 75px;
    height: 3px;

    appearance: none;
    -webkit-appearance: none;

    background: var(--border);

    border-radius: 999px;

    outline: none;

    cursor: pointer;
}


.audio-volume-slider::-webkit-slider-thumb {
    width: 10px;
    height: 10px;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    border-radius: 50%;

    background: var(--text);

    cursor: pointer;
}


.audio-volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border: none;
    border-radius: 50%;

    background: var(--text);

    cursor: pointer;
}


.audio-control-spacer {
    width: 83px;

    justify-self: end;
}


/* ---------- HIDDEN AUDIO ENGINE ---------- */

#audioPlayer {
    display: none;
}


/* ---------- SMALL SCREENS ---------- */

@media (max-width: 600px) {

    .audio-preview {
        padding: 22px;
    }


    .audio-artwork {
        width: 145px;
        height: 145px;
    }


    .audio-volume-slider {
        width: 55px;
    }


    .audio-control-spacer {
        width: 63px;
    }

}

/* ======================================================
   PREVIEW MODES + RESPONSIVE FIX
   ====================================================== */


/* ------------------------------------------------------
   BASE SAFETY
   ------------------------------------------------------ */

.preview-window {
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
}

.preview-content {
    min-width: 0;
    min-height: 0;
}

.preview-image-area {
    min-width: 0;
    min-height: 0;
}

.preview-sidebar {
    min-width: 0;
}

.preview-title-area {
    min-width: 0;
    flex: 1;
}

.preview-title-area h2 {
    max-width: 100%;
}


/* Prevent property values from becoming vertical */

.property strong {
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
}


/* ======================================================
   IMAGE MODE
   Keep the original image + properties layout
   ====================================================== */

.preview-window.image-mode .preview-content {
    display: grid;

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


.preview-window.image-mode .preview-image-area {
    min-width: 0;
    min-height: 0;

    padding: 30px;

    overflow: hidden;
}


.preview-window.image-mode .preview-sidebar {
    display: block;

    width: auto;
    min-width: 0;

    overflow-y: auto;

    border-left: 1px solid var(--border);
    border-top: none;
}


/* ======================================================
   AUDIO MODE
   Audio gets the entire preview width
   ====================================================== */

.preview-window.audio-mode {
    width: min(760px, 92vw);
    height: min(700px, 90vh);
}


.preview-window.audio-mode .preview-content {
    display: block;

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--background);
}


/* Hide the right properties panel ONLY for audio */

.preview-window.audio-mode .preview-sidebar {
    display: none;
}


/* Player gets the whole content area */

.preview-window.audio-mode .preview-image-area {
    width: 100%;
    min-height: 100%;

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

    padding: 28px;

    overflow: visible;
}


.preview-window.audio-mode .audio-preview {
    width: min(500px, 100%);

    margin: auto;
}


/* ======================================================
   MEDIUM WINDOWS
   ====================================================== */

@media (max-width: 900px) {

    .preview-overlay {
        padding: 18px;
    }


    .preview-window {
        width: min(760px, calc(100vw - 36px));
        height: min(760px, calc(100vh - 36px));
    }


    /*
       Images:
       Instead of crushing the properties bar,
       move it underneath the image.
    */

    .preview-window.image-mode .preview-content {
        display: flex;
        flex-direction: column;

        overflow-y: auto;
        overflow-x: hidden;
    }


    .preview-window.image-mode .preview-image-area {
        width: 100%;

        flex: 0 0 auto;

        min-height: 420px;
        height: 55vh;
        max-height: 520px;

        padding: 24px;
    }


    .preview-window.image-mode .preview-image-area img {
        max-width: 100%;
        max-height: 100%;

        object-fit: contain;
    }


    .preview-window.image-mode .preview-sidebar {
        width: 100%;

        flex: 0 0 auto;

        overflow: visible;

        border-left: none;
        border-top: 1px solid var(--border);

        padding: 24px;
    }


    /*
       Audio stays as one clean centered panel.
    */

    .preview-window.audio-mode {
        width: min(650px, calc(100vw - 36px));
    }


    .preview-window.audio-mode .preview-image-area {
        min-height: 0;

        padding: 24px;
    }

}


/* ======================================================
   SMALL WINDOWS / PHONES
   ====================================================== */

@media (max-width: 600px) {

    .preview-overlay {
        padding: 8px;
    }


    .preview-window,
    .preview-window.audio-mode {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);

        max-width: none;
        max-height: none;

        border-radius: 10px;
    }


    /* ---------- HEADER ---------- */

    .preview-header {
        min-height: 68px;

        padding: 14px 16px;

        gap: 12px;
    }


    .preview-title-area {
        min-width: 0;
    }


    .preview-title-area h2 {
        width: 100%;
        max-width: 100%;

        font-size: 14px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .close-preview {
        flex: 0 0 auto;
    }


    /* ---------- IMAGE ---------- */

    .preview-window.image-mode .preview-image-area {
        min-height: 300px;
        height: 48vh;

        padding: 14px;
    }


    .preview-window.image-mode .preview-sidebar {
        padding: 18px;
    }


    /* ---------- AUDIO ---------- */

    .preview-window.audio-mode .preview-content {
        overflow-y: auto;
    }


    .preview-window.audio-mode .preview-image-area {
        min-height: 100%;

        padding: 18px 14px;
    }


    .preview-window.audio-mode .audio-preview {
        width: 100%;

        padding: 22px 18px;
    }


    .preview-window.audio-mode .audio-artwork {
        width: 140px;
        height: 140px;

        margin-bottom: 18px;
    }


    .preview-window.audio-mode .audio-preview-info {
        margin-bottom: 20px;
    }


    .preview-window.audio-mode .audio-controls {
        gap: 10px;
    }


    .preview-window.audio-mode .audio-volume-slider {
        width: 50px;
    }


    .preview-window.audio-mode .audio-control-spacer {
        width: 63px;
    }

}


.audio-album {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 10px;

    opacity: 0.7;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ======================================================
   AUDIO FILE CARDS
   ====================================================== */

.audio-card-preview {
    position: relative;

    background:
        linear-gradient(
            145deg,
            var(--surface),
            var(--background)
        );
}


/* Embedded album artwork */

.audio-card-artwork {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: none;
}


/* Fallback when no artwork exists */

.audio-card-fallback {
    width: 52px;
    height: 52px;

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

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 30%,
        var(--border)
    );

    border-radius: 13px;

    background: color-mix(
        in srgb,
        var(--accent) 10%,
        var(--surface)
    );

    color: var(--accent);

    font-size: 23px;
}


/* Artist underneath title */

.audio-card-artist {
    color: var(--text-muted);

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Slight album-art zoom on hover */

.audio-file-card .audio-card-artwork {
    transition: transform 0.25s ease;
}


.audio-file-card:hover .audio-card-artwork {
    transform: scale(1.035);
}


/* ======================================================
   YZOR LOGO
   ====================================================== */

.logo {
    display: flex;
    align-items: center;

    width: 100%;
}

body.light-theme .vault-logo {
    /* Original black logo on light backgrounds */
    filter: invert(0);
}


.vault-logo {
    display: block;


    width: 72px;
    height: 72px;

    object-fit: contain;

    /* Black logo -> white on dark backgrounds */
    filter: invert(1);

    opacity: 0.9;

    transition:
        filter 0.2s ease,
        opacity 0.2s ease;
}

/* ======================================================
   LANDING PAGE
   ====================================================== */

.landing-page {
    position: fixed;
    inset: 0;

    z-index: 5000;

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

    min-height: 100vh;

    background: var(--background);
    color: var(--text);
}


/* Main centered content */

.landing-content {
    width: min(600px, 90vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    /* Slightly above absolute center */
    transform: translateY(-25px);
}


/* ======================================================
   CAT
   ====================================================== */

.landing-logo {
    width: 125px;
    height: 125px;

    object-fit: contain;

    margin-bottom: 24px;

    /* Black PNG -> white on our dark background */
    filter: invert(1);
}


/* ======================================================
   NAME
   ====================================================== */

.landing-name {
    margin: 0;

    color: var(--text);

    font-size: 34px;
    font-weight: 500;

    letter-spacing: 4px;
}


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

.landing-welcome {
    margin-top: 18px;

    color: var(--text-muted);

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

    letter-spacing: 0.4px;
}


/* ======================================================
   BOTTOM LANDING NAVIGATION
   ====================================================== */

.landing-actions {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 2;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;

    width: max-content;
    margin: 0;
}


/* ======================================================
   LANDING TEXT BUTTONS
   ====================================================== */

.landing-button {
    --tilt: 0deg;
    --move-x: 0px;

    min-width: 0;
    width: auto;

    padding: 6px 8px;

    background: transparent !important;
    color: var(--text-muted);

    border: none !important;
    outline: none;

    font-family: inherit;

    /* Bigger text */
    font-size: 17px;
    font-weight: 500;

    cursor: pointer;

    /*
       Rotate around the bottom-center so it feels
       like the word is balancing on something.
    */
    transform-origin: 50% 100%;

    transform:
        translateX(var(--move-x))
        rotate(var(--tilt))
        scale(1);

    transition:
        color 0.2s ease,
        transform 0.12s ease-out;
}


.landing-button-primary {
    background: transparent !important;
    color: var(--text-muted) !important;

    border: none !important;
}


/* Grow while hovering */

.landing-button:hover,
.landing-button-primary:hover {
    background: transparent !important;

    color: var(--text) !important;

    opacity: 1;

    transform:
        translateX(var(--move-x))
        rotate(var(--tilt))
        scale(1.18);
}

/* ======================================================
   LANDING BACKGROUND SCENE
   ====================================================== */

.landing-page {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    /* First-screen background */
    background-color: #000000 !important;

    background-image:
        url("landing-background.png") !important;

    background-size:
        cover !important;

    background-position:
        center calc(50% - 50px) !important;

    background-repeat:
        no-repeat !important;

    /* Landing stays above Vault */
    z-index: 5000 !important;

    /* IMPORTANT: allow the new page to scroll */
    overflow-x: hidden !important;
    overflow-y: auto !important;

    scroll-behavior: smooth;
}

/* ======================================================
   SECOND LANDING SCREEN
   ====================================================== */

.landing-explore {
    position: relative !important;

    margin-top: 100vh !important;

    background: #000000 !important;

    z-index: 5 !important;
}


/* Cover the ENTIRE width with black */

.landing-explore::before {
    content: "";

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;

    left: 50% !important;

    width: 100vw !important;

    transform:
        translateX(-50%) !important;

    background:
        #000000 !important;

    z-index: -1 !important;

    pointer-events: none !important;
}

/* Keep the cat / yzor / welcome above the background */

.landing-content {
    position: relative;
    z-index: 2;
}


/* Keep bottom buttons above the background */

.landing-actions {
    z-index: 2;
}

/* ======================================================
   FASTER LANDING ENTRANCE
   ====================================================== */

.landing-page {
    animation: landingFadeIn 0.55s ease-out both;
}


/* Cat */

.landing-logo {
    opacity: 0;

    animation: landingLogoIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.12s;
}


/* Name */

.landing-name {
    opacity: 0;

    animation: landingItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.20s;
}


/* Welcome */

.landing-welcome {
    opacity: 0;

    animation: landingItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.28s;
}


/* Buttons */

.landing-actions {
    opacity: 0;

    animation: landingButtonsIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.38s;
}


/* ======================================================
   KEYFRAMES
   ====================================================== */

@keyframes landingFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Separate animation for the cat so it stays WHITE */

@keyframes landingLogoIn {
    from {
        opacity: 0;
        transform: translateY(10px);

        filter: invert(1) blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);

        filter: invert(1) blur(0);
    }
}


/* Name + welcome */

@keyframes landingItemIn {
    from {
        opacity: 0;
        transform: translateY(10px);

        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);

        filter: blur(0);
    }
}


/* Bottom buttons */

@keyframes landingButtonsIn {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}

/* ======================================================
   PREVENT VAULT FLASH ON LOAD
   ====================================================== */

/* Vault is hidden by default */
.vault-interface {
    visibility: hidden;
    opacity: 0;
}

/* Only reveal Vault after entering */
body.vault-open .vault-interface {
    visibility: visible;
    opacity: 1;
}

/* ======================================================
   LANDING PAGE CURSOR LIGHT
   ====================================================== */

.landing-page::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.09) 0%,
            rgba(255, 255, 255, 0.025) 35%,
            transparent 70%
        );

    opacity: 0;

    transition: opacity 0.5s ease;

    z-index: 1;
}


/* Show light when cursor is on landing page */

.landing-page:hover::after {
    opacity: 1;
}

.landing-page {
    font-family: "Omori", monospace;
}

/* ======================================================
   LANDING PAGE OMORI FONT SIZES
   ====================================================== */


/* "yzor" */

.landing-name {
    font-size: 55px;
    letter-spacing: 3px;
}


/* "welcome." */

.landing-welcome {
    font-size: 30px;
    letter-spacing: 1px;
    margin-top: 12px;
}


/* [Enter] and [About Me] */

.landing-button {
    font-size: 30px;
    padding: 8px 12px;
}


/* Space between the two buttons */

.landing-actions {
    gap: 38px;
}

/* ==========================================================
   YZOR VAULT — OMORI DARK REDESIGN
   STEP 2
   ========================================================== */


/* ----------------------------------------------------------
   VAULT BASE
   ---------------------------------------------------------- */

.vault-shell {
    position: relative;

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

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.025),
            transparent 38%
        ),
        #000;

    color: #f2f2f2;

    font-family: "Omori", monospace;

    overflow-x: hidden;
}


/* Override old sidebar/content positioning */

body.vault-open {
    background: #000;
}

body.vault-open .vault-shell {
    visibility: visible;
    opacity: 1;
}


/* ==========================================================
   TOP BAR
   ========================================================== */

.vault-topbar {
    position: relative;

    width: 100%;
    min-height: 155px;

    padding:
        25px
        clamp(30px, 5vw, 85px)
        20px;

    display: grid;

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

    grid-template-areas:
        "brand nav tools";

    align-items: center;

    gap: 35px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.018),
            transparent
        );

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

    box-sizing: border-box;

    z-index: 20;
}


/* ==========================================================
   BRAND
   ========================================================== */

.vault-brand {
    grid-area: brand;

    display: flex;
    align-items: center;

    gap: 13px;

    justify-self: start;

    color: rgba(255, 255, 255, 0.82);

    font-size: 25px;

    white-space: nowrap;
}


.vault-brand-logo {
    width: 35px;
    height: 35px;

    object-fit: contain;

    filter: invert(1);

    opacity: 0.9;
}


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

.vault-nav {
    grid-area: nav;

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

    gap: clamp(16px, 2vw, 32px);

    justify-self: center;
}


/* Reset old nav-item appearance */

.vault-nav .nav-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 6px;

    width: auto;
    min-width: 0;

    padding: 8px 3px;

    margin: 0;

    background: transparent;

    border: none;
    border-radius: 0;

    color: rgba(255, 255, 255, 0.48);

    font-family: "Omori", monospace;

    font-size: 25px;
    font-weight: normal;

    line-height: 1;

    cursor: pointer;

    transform: scale(1);

    transform-origin: center;

    transition:
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);

    overflow: visible;
}


/* Text */

.vault-nav .nav-text {
    display: inline-block;

    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Arrow is hidden unless active/hovered */

.vault-nav .nav-arrow {
    display: inline-block;

    width: 0;

    opacity: 0;

    overflow: hidden;

    color: #fff;

    transform:
        translateX(7px)
        scale(0.7);

    transition:
        width 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Current page */

.vault-nav .nav-item.active {
    color: #fff;
}


.vault-nav .nav-item.active .nav-arrow {
    width: 12px;

    opacity: 1;

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


/* Hover */

.vault-nav .nav-item:hover {
    color: #fff;

    transform: scale(1.22);

    z-index: 5;
}


.vault-nav .nav-item:hover .nav-arrow {
    width: 12px;

    opacity: 1;

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


/* While another item is hovered, visually soften active arrow.
   Step 3 JS will make the arrow actually MOVE between items. */

.vault-nav:hover .nav-item.active:not(:hover) {
    color: rgba(255, 255, 255, 0.48);
}


/* ==========================================================
   TOP TOOLS
   ========================================================== */

.vault-tools {
    grid-area: tools;

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

    gap: 13px;

    justify-self: end;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.vault-search-wrap {
    position: relative;

    display: flex;
    align-items: center;

    width: 155px;

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

    transition:
        width 0.25s ease,
        border-color 0.2s ease;
}


.vault-search-wrap:focus-within {
    width: 210px;

    border-color:
        rgba(255, 255, 255, 0.75);
}


.vault-search-symbol {
    margin-right: 7px;

    color: rgba(255, 255, 255, 0.35);

    font-size: 23px;
}


.vault-tools .search {
    width: 100%;

    padding: 7px 0;

    background: transparent;

    border: none;
    outline: none;

    color: #fff;

    font-family: "Omori", monospace;

    font-size: 21px;
}


.vault-tools .search::placeholder {
    color: rgba(255, 255, 255, 0.28);
}


/* Remove browser search decoration */

.vault-tools .search::-webkit-search-cancel-button {
    filter: invert(1);

    opacity: 0.5;
}


/* ==========================================================
   UPLOAD + SETTINGS
   ========================================================== */

.vault-tools .upload-button,
.vault-tools .settings-button {
    width: auto;

    margin: 0;
    padding: 7px 8px;

    background: transparent;

    border: none;

    color: rgba(255, 255, 255, 0.48);

    font-family: "Omori", monospace;

    font-size: 22px;
    font-weight: normal;

    cursor: pointer;

    transform: scale(1);

    transition:
        color 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}


.vault-tools .upload-button:hover,
.vault-tools .settings-button:hover {
    background: transparent;

    color: #fff;

    transform: scale(1.12);
}


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

.vault-main {
    position: relative;

    width: min(1180px, calc(100% - 70px));

    margin: 0 auto;

    padding:
        75px
        0
        130px;

    box-sizing: border-box;
}


/* ==========================================================
   HEADING
   ========================================================== */

.vault-heading {
    margin-bottom: 55px;

    text-align: center;
}


.vault-heading .welcome {
    margin: 0 0 4px;

    color: rgba(255, 255, 255, 0.32);

    font-family: "Omori", monospace;

    font-size: 18px;

    letter-spacing: 2px;
}


.vault-heading h1 {
    margin: 0;

    color: #fff;

    font-family: "Omori", monospace;

    font-size: clamp(48px, 6vw, 70px);

    font-weight: normal;

    line-height: 1;
}


.vault-heading-line {
    width: 45px;
    height: 1px;

    margin: 24px auto 0;

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


/* ==========================================================
   FOLDERS
   ========================================================== */

.vault-folders {
    margin-bottom: 90px;
}


.vault-folders .folder-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}


/* Folder card */

.vault-folders .folder-card {
    position: relative;

    min-height: 155px;

    padding: 23px 25px;

    display: flex;
    flex-direction: column;

    text-align: left;

    background:
        rgba(255, 255, 255, 0.012);

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

    border-radius: 0;

    color: #fff;

    font-family: "Omori", monospace;

    cursor: pointer;

    overflow: hidden;

    transform:
        translateY(0)
        scale(1);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}


.vault-folders .folder-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: #fff;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}


.vault-folders .folder-card:hover {
    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(255, 255, 255, 0.25);

    transform:
        translateY(-5px)
        scale(1.015);
}


.vault-folders .folder-card:hover::after {
    transform: scaleX(1);
}


/* Top of folder */

.folder-top {
    display: flex;

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

    margin-bottom: auto;
}


.folder-symbol {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 28px;
}


.folder-enter {
    color:
        rgba(255, 255, 255, 0.2);

    font-size: 25px;

    transform: translateX(-4px);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.folder-card:hover .folder-enter {
    color: #fff;

    transform: translateX(2px);
}


.vault-folders .folder-card h3 {
    margin:
        25px
        0
        0;

    color: #fff;

    font-family: "Omori", monospace;

    font-size: 30px;
    font-weight: normal;

    line-height: 1;
}


.vault-folders .folder-card p {
    margin:
        4px
        0
        0;

    color:
        rgba(255, 255, 255, 0.34);

    font-family: "Omori", monospace;

    font-size: 19px;
}


/* ==========================================================
   FILE SECTION
   ========================================================== */

.files-section {
    margin-top: 0;
}


.files-section .section-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 20px;

    padding-bottom: 13px;

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


.files-section .section-header h2 {
    margin: 0;

    color: #fff;

    font-family: "Omori", monospace;

    font-size: 34px;
    font-weight: normal;
}


.files-section .file-count {
    color:
        rgba(255, 255, 255, 0.3);

    font-family: "Omori", monospace;

    font-size: 19px;
}


/* ==========================================================
   FILE GRID
   ========================================================== */

.vault-shell .file-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;

    min-height: 220px;

    padding: 0;
}


/* Existing generated cards */

.vault-shell .file-card {
    position: relative;

    background:
        rgba(255, 255, 255, 0.012);

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

    border-radius: 0;

    color: #fff;

    box-shadow: none;

    overflow: hidden;

    cursor: pointer;

    transform:
        translateY(0)
        scale(1);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}


.vault-shell .file-card:hover {
    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(255, 255, 255, 0.25);

    transform:
        translateY(-4px)
        scale(1.015);
}


/* Make text inside generated cards use OMORI */

.vault-shell .file-card,
.vault-shell .file-card * {
    font-family: "Omori", monospace;
}


/* File names */

.vault-shell .file-card h3 {
    color: #fff;

    font-size: 24px;
    font-weight: normal;
}


.vault-shell .file-card p,
.vault-shell .file-card span {
    font-size: 18px;
}


/* Images */

.vault-shell .file-card img {
    border-radius: 0;
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.vault-shell .empty-files {
    grid-column: 1 / -1;

    min-height: 250px;

    display: flex;
    flex-direction: column;

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

    background: transparent;

    border:
        1px dashed rgba(255, 255, 255, 0.08);

    color:
        rgba(255, 255, 255, 0.3);

    text-align: center;
}


.vault-shell .empty-icon {
    margin-bottom: 7px;

    color:
        rgba(255, 255, 255, 0.3);

    font-family: "Omori", monospace;

    font-size: 36px;
}


.vault-shell .empty-files p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.65);

    font-family: "Omori", monospace;

    font-size: 28px;
}


.vault-shell .empty-files span {
    margin-top: 4px;

    color:
        rgba(255, 255, 255, 0.27);

    font-family: "Omori", monospace;

    font-size: 19px;
}


/* ==========================================================
   DRAG / DROP
   ========================================================== */

.vault-shell .drop-message {
    background:
        rgba(0, 0, 0, 0.94);

    border:
        1px dashed rgba(255, 255, 255, 0.35);

    border-radius: 0;

    color: #fff;

    font-family: "Omori", monospace;
}


.vault-shell .drop-message-content strong {
    font-family: "Omori", monospace;

    font-size: 30px;
    font-weight: normal;
}


.vault-shell .drop-message-content span {
    font-family: "Omori", monospace;

    font-size: 20px;

    color:
        rgba(255, 255, 255, 0.4);
}


/* ==========================================================
   BOTTOM PREVIEW MARKER
   ========================================================== */

.vault-preview-zone {
    margin-top: 110px;

    padding-bottom: 20px;
}


.vault-preview-divider {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );
}


.vault-preview-zone-heading {
    display: flex;

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

    gap: 9px;

    padding-top: 25px;

    color:
        rgba(255, 255, 255, 0.25);

    font-family: "Omori", monospace;

    font-size: 23px;
}


/* ==========================================================
   SETTINGS OVERLAY
   ========================================================== */

.settings-overlay {
    background:
        rgba(0, 0, 0, 0.88);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


.settings-panel {
    background: #050505;

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

    border-radius: 0;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.75);

    color: #fff;

    font-family: "Omori", monospace;
}


.settings-panel,
.settings-panel * {
    font-family: "Omori", monospace;
}


.settings-header {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.settings-label {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 18px;
}


.settings-header h2 {
    color: #fff;

    font-size: 35px;
    font-weight: normal;
}


.setting-row h3 {
    color: #fff;

    font-size: 27px;
    font-weight: normal;
}


.setting-row p {
    color:
        rgba(255, 255, 255, 0.35);

    font-size: 19px;
}


.close-settings,
.reset-theme {
    background: transparent;

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

    border-radius: 0;

    color:
        rgba(255, 255, 255, 0.6);

    font-family: "Omori", monospace;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.close-settings:hover,
.reset-theme:hover {
    background: transparent;

    color: #fff;

    border-color:
        rgba(255, 255, 255, 0.4);
}


/* ==========================================================
   FILE PREVIEW — DARK OMORI STYLE
   ========================================================== */

.preview-overlay {
    background:
        rgba(0, 0, 0, 0.88);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


.preview-window {
    background: #030303;

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

    border-radius: 0;

    box-shadow:
        0 25px 90px rgba(0, 0, 0, 0.8);

    color: #fff;

    font-family: "Omori", monospace;
}


.preview-window,
.preview-window * {
    font-family: "Omori", monospace;
}


/* Preview header */

.preview-header {
    background: #030303;

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


.preview-label {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 17px;
}


.preview-title-area h2 {
    color: #fff;

    font-size: 31px;
    font-weight: normal;
}


.close-preview {
    background: transparent;

    border: none;

    color:
        rgba(255, 255, 255, 0.4);

    font-family: "Omori", monospace;

    font-size: 30px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.close-preview:hover {
    background: transparent;

    color: #fff;

    transform: scale(1.15);
}


/* Preview content */

.preview-content {
    background: #030303;
}


.preview-image-area {
    background:
        #000;
}


/* ==========================================================
   PROPERTIES
   ========================================================== */

.preview-sidebar {
    background:
        #050505;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    color: #fff;
}


.property-heading {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 17px;

    letter-spacing: 1px;
}


.property {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);
}


.property span {
    color:
        rgba(255, 255, 255, 0.35);

    font-size: 18px;
}


.property strong {
    color:
        rgba(255, 255, 255, 0.82);

    font-size: 19px;
    font-weight: normal;
}


/* ==========================================================
   AUDIO PLAYER
   ========================================================== */

.audio-preview {
    background: #000;

    color: #fff;
}


.audio-artwork {
    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 0;

    background: #050505;

    box-shadow: none;
}


.audio-artwork img {
    border-radius: 0;
}


.audio-artwork-fallback {
    background: #050505;

    color:
        rgba(255, 255, 255, 0.4);

    font-family: "Omori", monospace;

    font-size: 55px;
}


.audio-preview-label {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 17px;
}


.audio-preview-info h3 {
    color: #fff;

    font-size: 38px;
    font-weight: normal;
}


.audio-artist {
    color:
        rgba(255, 255, 255, 0.65);

    font-size: 24px;
}


.audio-album {
    color:
        rgba(255, 255, 255, 0.32);

    font-size: 19px;
}


/* Play button */

.audio-play-button {
    background: #fff;

    border: 1px solid #fff;

    color: #000;

    border-radius: 50%;

    font-family: "Omori", monospace;

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}


.audio-play-button:hover {
    background: rgba(255, 255, 255, 0.85);

    transform: scale(1.1);
}


/* Progress + volume */

.audio-progress,
.audio-volume-slider {
    accent-color: #fff;
}


/* ==========================================================
   VAULT ENTRANCE ANIMATION
   ========================================================== */

body.vault-open .vault-shell {
    animation:
        vaultEntrance
        0.65s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


@keyframes vaultEntrance {

    from {
        opacity: 0;

        transform:
            translateY(14px)
            scale(0.995);

        filter: blur(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }

}


/* Top bar comes in separately */

body.vault-open .vault-topbar {
    animation:
        vaultTopbarEntrance
        0.7s
        0.08s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


@keyframes vaultTopbarEntrance {

    from {
        opacity: 0;

        transform:
            translateY(-10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* Main content slightly delayed */

body.vault-open .vault-main {
    animation:
        vaultContentEntrance
        0.75s
        0.16s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


@keyframes vaultContentEntrance {

    from {
        opacity: 0;

        transform:
            translateY(14px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .vault-topbar {
        grid-template-columns:
            auto
            1fr;

        grid-template-areas:
            "brand tools"
            "nav nav";

        row-gap: 20px;
    }


    .vault-nav {
        width: 100%;

        justify-content: center;
    }


    .vault-folders .folder-grid,
    .vault-shell .file-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



@media (max-width: 700px) {

    .vault-topbar {
        padding:
            22px
            20px;

        grid-template-columns: 1fr;

        grid-template-areas:
            "brand"
            "nav"
            "tools";
    }


    .vault-brand {
        justify-self: center;
    }


    .vault-nav {
        flex-wrap: wrap;

        gap: 10px 18px;
    }


    .vault-nav .nav-item {
        font-size: 22px;
    }


    .vault-tools {
        width: 100%;

        justify-self: stretch;
        justify-content: center;

        flex-wrap: wrap;
    }


    .vault-search-wrap {
        width: 100%;
    }


    .vault-search-wrap:focus-within {
        width: 100%;
    }


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

        padding-top: 55px;
    }


    .vault-folders .folder-grid,
    .vault-shell .file-grid {
        grid-template-columns: 1fr;
    }


    .vault-heading h1 {
        font-size: 52px;
    }

}

/* ==========================================================
   LANDING / VAULT VISIBILITY FIX
   ========================================================== */


/* Landing page is visible when the site first loads */

.landing-page {
    display: flex;
    visibility: visible;
}


/* Vault MUST be hidden before Enter is clicked */

.vault-shell {
    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none;
}


/* Only show the Vault after JavaScript adds vault-open */

body.vault-open .vault-shell {
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto;
}


/* Keep landing above everything while it exists */

.landing-page {
    z-index: 5000;
}

/* ==========================================================
   FORCE VAULT NAV HORIZONTAL
   ========================================================== */

.vault-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 30px !important;

    width: auto !important;
    height: auto !important;

    flex-wrap: nowrap !important;
}


/* Each navigation button stays side-by-side */

.vault-nav .nav-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 8px 3px !important;

    white-space: nowrap !important;
}


/* Keep arrow beside the word */

.vault-nav .nav-arrow,
.vault-nav .nav-text {
    display: inline-block;
}


/* Slightly more room for the moving > */

.vault-nav .nav-item {
    gap: 6px;
}

/* ==========================================================
   BIGGER VAULT LOGO
   ========================================================== */

.vault-brand-logo {
    width: 58px !important;
    height: 58px !important;

    object-fit: contain;

    filter: invert(1);

    opacity: 1;
}


/* Give the logo/name a little more spacing */

.vault-brand {
    gap: 16px !important;
}


/* Slightly larger "yzor vault" text */

.vault-brand span {
    font-size: 28px;
}

/* ==========================================================
   VAULT CATEGORY PAGES
   ========================================================== */


/* Folder boxes smoothly disappear on category pages */

.vault-folders {
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Hide folder boxes everywhere except Home */

body:not(.vault-home) .vault-folders {
    display: none;
}


/* Give category pages more breathing room */

body:not(.vault-home) .vault-heading {
    margin-bottom: 70px;
}


/* ----------------------------------------------------------
   PAGE TRANSITIONS — SMOOTH DIRECTIONAL SWIPE
   ---------------------------------------------------------- */

.vault-main {
    overflow-x: hidden;

    /*
       Helps the browser prepare the element for movement
       without constantly repainting everything.
    */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}


/* Moving to an EARLIER category */
.vault-main.page-swipe-left {
    animation: vaultPageSwipeLeft 0.32s ease-out;
}


/* Moving to a LATER category */
.vault-main.page-swipe-right {
    animation: vaultPageSwipeRight 0.32s ease-out;
}


/*
   IMPORTANT:
   We no longer animate opacity or blur.

   The page stays fully visible during the transition,
   which prevents the white/black flash at the end.
*/

@keyframes vaultPageSwipeLeft {

    from {
        transform: translate3d(45px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }

}


@keyframes vaultPageSwipeRight {

    from {
        transform: translate3d(-45px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }

}


@media (prefers-reduced-motion: reduce) {

    .vault-main.page-swipe-left,
    .vault-main.page-swipe-right {
        animation: none;
    }

}

/* ======================================================
   VAULT HOME + FULL CONTENT SWIPE FIX
   ====================================================== */


/* ------------------------------------------------------
   HOME FOLDERS
   Big folder cards only exist visually on Home
   ------------------------------------------------------ */

body:not(.vault-home) .vault-folders {
    display: none !important;
}


/* Restore the larger Home folder area */

body.vault-home .vault-folders {
    display: block !important;
    width: 100%;
    margin-top: 55px;
    margin-bottom: 85px;
}


/* Large 4-card layout */

body.vault-home .folder-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}


/* Make the folders big again */

body.vault-home .folder-card {
    min-height: 190px !important;

    padding: 28px 26px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    background: rgba(255, 255, 255, 0.015) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.09) !important;

    border-radius: 2px !important;

    transition:
        transform .28s cubic-bezier(.22, 1, .36, 1),
        border-color .28s ease,
        background .28s ease !important;
}


body.vault-home .folder-card:hover {
    transform: translateY(-7px) !important;

    border-color:
        rgba(255, 255, 255, 0.22) !important;

    background:
        rgba(255, 255, 255, 0.03) !important;
}


/* Bigger folder symbol */

body.vault-home .folder-symbol {
    font-size: 38px !important;
}


/* Bigger folder name */

body.vault-home .folder-card h3 {
    font-size: 31px !important;
    margin-top: 35px !important;
}


/* File count */

body.vault-home .folder-card p {
    font-size: 20px !important;

    color:
        rgba(255, 255, 255, 0.42) !important;
}


/* ------------------------------------------------------
   VAULT CONTENT
   Everything BELOW the top navigation animates together
   ------------------------------------------------------ */

.vault-main {
    position: relative;
    overflow: hidden;

    will-change:
        transform,
        opacity,
        filter;
}


/* ------------------------------------------------------
   GOING TO AN EARLIER PAGE

   Images -> Music
   Projects -> Images
   Notes -> Home

   Content physically moves LEFT
   ------------------------------------------------------ */

.vault-main.page-swipe-left {
    animation:
        vaultPageSwipeLeft
        .52s
        cubic-bezier(.22, 1, .36, 1)
        both !important;
}


@keyframes vaultPageSwipeLeft {

    0% {
        opacity: 0;

        transform:
            translateX(150px);

        filter:
            blur(4px);
    }

    45% {
        opacity: .75;
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }

}


/* ------------------------------------------------------
   GOING TO A LATER PAGE

   Home -> Music
   Music -> Images
   Images -> Projects

   Content physically moves RIGHT
   ------------------------------------------------------ */

.vault-main.page-swipe-right {
    animation:
        vaultPageSwipeRight
        .52s
        cubic-bezier(.22, 1, .36, 1)
        both !important;
}


@keyframes vaultPageSwipeRight {

    0% {
        opacity: 0;

        transform:
            translateX(-150px);

        filter:
            blur(4px);
    }

    45% {
        opacity: .75;
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }

}


/* ------------------------------------------------------
   CATEGORY PAGE SPACING
   ------------------------------------------------------ */

body:not(.vault-home) .vault-heading {
    margin-top: 15px !important;
    margin-bottom: 70px !important;

    text-align: left !important;
}


body:not(.vault-home) .vault-heading .welcome {
    display: none !important;
}


body:not(.vault-home) .vault-heading h1 {
    font-size: 58px !important;
}


body:not(.vault-home) .vault-heading-line {
    width: 100% !important;

    margin:
        25px
        0
        0 !important;

    background:
        rgba(255, 255, 255, 0.1) !important;
}


body:not(.vault-home) .files-section {
    margin-top: 0 !important;
}


body:not(.vault-home)
.files-section
.section-header {
    margin-bottom: 30px !important;
}


body:not(.vault-home)
.files-section
.section-header
h2 {
    font-size: 29px !important;

    color:
        rgba(255, 255, 255, 0.6) !important;
}


/* ------------------------------------------------------
   MOBILE
   ------------------------------------------------------ */

@media (max-width: 900px) {

    body.vault-home .folder-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }

}


@media (max-width: 560px) {

    body.vault-home .folder-grid {
        grid-template-columns:
            1fr
            !important;
    }

}

/* ======================================================
   HOME PAGE — RESTORE ORIGINAL LARGE FOLDER LAYOUT
   ====================================================== */


/* Home page folder section */

body.vault-home .vault-folders {
    display: block !important;

    width: 100% !important;

    margin-top: 54px !important;
    margin-bottom: 0 !important;
}


/* Four large folders across the page */

body.vault-home .folder-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100% !important;
}


/* Restore the large folder cards */

body.vault-home .folder-card {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 165px !important;

    padding:
        27px
        25px
        24px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    text-align: left !important;

    background: #000 !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.11) !important;

    border-radius: 0 !important;
}


/* Top row: icon + arrow */

body.vault-home .folder-card .folder-top {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin-bottom: 38px !important;
}


/* Folder icon */

body.vault-home .folder-symbol {
    font-size: 22px !important;

    line-height: 1 !important;

    color:
        rgba(255, 255, 255, 0.58) !important;
}


/* Arrow on right */

body.vault-home .folder-card .folder-arrow {
    font-size: 20px !important;

    color:
        rgba(255, 255, 255, 0.20) !important;
}


/* Music / Images / Projects / Notes */

body.vault-home .folder-card h3 {
    margin: 0 0 6px !important;

    font-size: 25px !important;

    line-height: 1 !important;

    font-weight: normal !important;
}


/* 0 files */

body.vault-home .folder-card p {
    margin: 0 !important;

    font-size: 17px !important;

    color:
        rgba(255, 255, 255, 0.28) !important;
}


/* Subtle hover like the old version */

body.vault-home .folder-card:hover {
    transform:
        translateY(-5px) !important;

    border-color:
        rgba(255, 255, 255, 0.25) !important;

    background:
        rgba(255, 255, 255, 0.015) !important;
}


/* ======================================================
   REMOVE RECENT FILES ONLY FROM HOME
   ====================================================== */

body.vault-home .files-section {
    display: none !important;
}


/* Also remove the preview marker/space from Home */

body.vault-home .vault-preview-zone {
    display: none !important;
}


/* ======================================================
   CATEGORY PAGES
   Files remain visible everywhere else
   ====================================================== */

body:not(.vault-home) .files-section {
    display: block !important;
}


body:not(.vault-home) .vault-preview-zone {
    display: block !important;
}


/* Folder buttons themselves only belong on Home */

body:not(.vault-home) .vault-folders {
    display: none !important;
}


/* ======================================================
   HOME SPACING
   ====================================================== */

body.vault-home .vault-main {
    padding-top: 72px !important;
}


body.vault-home .vault-heading {
    margin-bottom: 0 !important;
}


body.vault-home .vault-heading .welcome {
    display: block !important;
}


body.vault-home .vault-heading h1 {
    font-size: 52px !important;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 950px) {

    body.vault-home .folder-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 560px) {

    body.vault-home .folder-grid {
        grid-template-columns:
            1fr !important;
    }

}

/* ======================================================
   CLICKABLE YZOR LOGO
   ====================================================== */

.vault-brand {
    cursor: pointer;

    transition:
        transform .28s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;

    transform-origin: left center;

    user-select: none;
}


/* Grow like the other clickable elements */

.vault-brand:hover {
    transform: scale(1.13);
}


/* Slight press when clicked */

.vault-brand:active {
    transform: scale(1.06);
}


/* Let the logo + text animate smoothly too */

.vault-brand-logo,
.vault-brand span {
    transition:
        transform .28s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}


/* ======================================================
   PREVIEW FILE ACTIONS
   ====================================================== */

.preview-file-actions {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-left: auto;
    margin-right: 18px;
}


.preview-action-button {
    appearance: none;

    border: 0;
    outline: none;

    padding: 5px 7px;

    background: transparent;
    color: rgba(255, 255, 255, 0.48);

    font-family: "Omori", monospace;
    font-size: 19px;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .25s cubic-bezier(.22, 1, .36, 1);
}


.preview-action-button:hover {
    color: #fff;

    transform: scale(1.15);
}


.preview-action-button:active {
    transform: scale(1.05);
}


/* Rename input */

.preview-rename-input {
    width: min(320px, 45vw);

    padding: 4px 7px;

    border: 0;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.35);

    outline: none;

    background: transparent;
    color: #fff;

    font-family: "Omori", monospace;
    font-size: inherit;
}


.preview-rename-input:focus {
    border-bottom-color: #fff;
}

/* ======================================================
   PREVIEW HEADER ACTIONS — CLEAN FIX
   ====================================================== */

.preview-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    padding: 18px 70px 18px 22px;
}

.preview-title-area {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
}

.preview-title-area #previewFileName {
    margin: 0;
    max-width: 100%;
    color: #fff;
    font-size: 31px;
    font-weight: normal;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-file-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

.preview-action-button {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255,255,255,.42);
    font-family: "Omori", monospace;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}

.preview-action-button:hover {
    color: #fff;
    transform: scale(1.12);
}

.preview-action-button:active {
    transform: scale(1.04);
}

.preview-header #closePreview,
.preview-header .close-preview {
    position: absolute;
    top: 50%;
    right: 22px;
    left: auto;
    width: 34px;
    height: 34px;
    margin: 0;
    transform: translateY(-50%);
    z-index: 5;
}

.preview-header #closePreview:hover,
.preview-header .close-preview:hover {
    transform: translateY(-50%) scale(1.15);
}

.preview-rename-input {
    width: min(360px, 55vw);
    padding: 2px 4px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.35);
    outline: 0;
    background: transparent;
    color: #fff;
    font-family: "Omori", monospace;
    font-size: 31px;
}

.preview-rename-input:focus {
    border-bottom-color: #fff;
}

@media (max-width: 600px) {
    .preview-header {
        min-height: 82px;
        padding: 14px 56px 14px 16px;
    }

    .preview-title-area #previewFileName,
    .preview-rename-input {
        font-size: 22px;
    }

    .preview-file-actions {
        gap: 14px;
    }

    .preview-action-button {
        font-size: 16px;
    }

    .preview-header #closePreview,
    .preview-header .close-preview {
        right: 14px;
    }
}

/* ======================================================
   SCROLLABLE LANDING PAGE
   ====================================================== */

/*
   The landing page used to be locked to the viewport.
   Now it can scroll vertically.
*/

.landing-page {
    display: block !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    height: 100vh !important;
}


/* ======================================================
   FIRST LANDING SCREEN
   ====================================================== */

/*
   Keep the original landing content occupying the
   first full screen.
*/

.landing-content {
    position: absolute;
}


/*
   Keep your Enter / About Me buttons on the first screen.
*/

.landing-actions {
    position: absolute !important;
}


/* ======================================================
   EXPLORE SECTION
   ====================================================== */

.landing-explore {
    position: relative;

    width: min(
        1180px,
        calc(100% - 70px)
    );

    min-height: 100vh;

    margin: 100vh auto 0;

    padding:
        105px
        0
        150px;

    box-sizing: border-box;

    z-index: 5;
}


/* ------------------------------------------------------
   HEADING
   ------------------------------------------------------ */

.explore-header {
    text-align: center;

    margin-bottom: 65px;
}


.explore-header p {
    margin: 0 0 13px;

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

    font-family:
        "Omori",
        monospace;

    font-size: 17px;

    letter-spacing: 2px;
}


.explore-header h2 {
    margin: 0;

    color: #fff;

    font-family:
        "Omori",
        monospace;

    font-size: 52px;

    font-weight: normal;

    letter-spacing: 2px;
}


.explore-line {
    width: 45px;
    height: 1px;

    margin:
        28px
        auto
        0;

    background:
        rgba(255,255,255,.18);
}


/* ======================================================
   CATEGORY GRID
   ====================================================== */

.explore-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* ------------------------------------------------------
   CATEGORY CARD
   ------------------------------------------------------ */

.explore-card {
    position: relative;

    min-height: 220px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

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

    border-radius: 0;

    outline: none;

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

    color: #fff;

    font-family:
        "Omori",
        monospace;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .3s
            cubic-bezier(.22,1,.36,1),

        border-color .25s ease,

        background .25s ease;
}


/*
   Very subtle glow that appears on hover.
*/

.explore-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,.045),
            transparent 65%
        );

    opacity: 0;

    transition:
        opacity .3s ease;

    pointer-events: none;
}


.explore-card:hover {
    transform:
        translateY(-7px)
        scale(1.015);

    border-color:
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.018);
}


.explore-card:hover::before {
    opacity: 1;
}


.explore-card:active {
    transform:
        translateY(-3px)
        scale(.99);
}


/* ------------------------------------------------------
   CARD NUMBER
   ------------------------------------------------------ */

.explore-number {
    color:
        rgba(255,255,255,.24);

    font-size: 17px;

    letter-spacing: 1px;
}


/* ------------------------------------------------------
   CARD BOTTOM
   ------------------------------------------------------ */

.explore-card-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.explore-card-bottom h3 {
    margin: 0;

    font-size: 27px;

    font-weight: normal;
}


.explore-card-bottom > span {
    color:
        rgba(255,255,255,.25);

    font-size: 22px;

    transition:
        color .2s ease,
        transform .25s
            cubic-bezier(.22,1,.36,1);
}


.explore-card:hover
.explore-card-bottom > span {

    color: #fff;

    transform:
        translateX(5px);
}


/* ======================================================
   SMOOTH SCROLLING
   ====================================================== */

.landing-page {
    scroll-behavior: smooth;
}


/* ======================================================
   RESPONSIVE GRID
   ====================================================== */

@media (max-width: 900px) {

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

}


@media (max-width: 560px) {

    .landing-explore {
        width:
            calc(100% - 36px);
    }


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

}

/* ======================================================
   LANDING PAGE — FIXED FIRST SCREEN + SCROLL CONTENT
   ====================================================== */


/* The whole landing area is the scroll container */
.landing-page {
    position: fixed !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100vh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background-color: #000 !important;

    /*
       IMPORTANT:
       Background is removed from the overall scrolling
       container. Screen 1 gets it instead.
    */
    background-image: none !important;

    scroll-behavior: smooth;

    z-index: 5000;
}


/* ======================================================
   FIRST SCREEN BACKGROUND
   ====================================================== */

/*
   This creates a dedicated first-screen background.
   It stays exactly one viewport tall.
*/

.landing-page::before {
    content: "";

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    background-color: #000;

    background-image:
        url("corner-scene.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position:
        center calc(50% - 50px);

    pointer-events: none;

    z-index: 0;
}


/* ======================================================
   MOUSE LIGHT
   Works across the WHOLE scrollable landing page
   ====================================================== */

.landing-page::after {
    content: "";

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            circle 220px
            at var(--mouse-x, 50%)
               var(--mouse-y, 50%),

            rgba(255,255,255,.09) 0%,
            rgba(255,255,255,.025) 35%,
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity .35s ease;

    z-index: 20 !important;
}


.landing-page:hover::after {
    opacity: 1;
}


/* ======================================================
   RESTORE ORIGINAL LOGO / YZOR / WELCOME POSITION
   ====================================================== */

.landing-content {
    position: absolute !important;

    /*
       Put it back in the center of SCREEN ONE,
       not the entire scrolling document.
    */

    top: 50% !important;
    left: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    z-index: 5 !important;
}


/* Keep original logo sizing/positioning behavior */

.landing-logo {
    display: block;

    margin:
        0
        auto !important;
}


/* Center yzor */

.landing-name {
    text-align: center !important;
}


/* Center welcome */

.landing-welcome {
    text-align: center !important;
}


/* ======================================================
   RESTORE ENTER / ABOUT ME POSITION
   ====================================================== */

.landing-actions {
    position: absolute !important;

    left: 50% !important;
    bottom: 65px !important;

    transform:
        translateX(-50%) !important;

    display: flex !important;

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

    gap: 38px !important;

    width: max-content !important;

    z-index: 5 !important;
}


/* ======================================================
   SECOND SCREEN / EXPLORE
   ====================================================== */

.landing-explore {
    position: relative !important;

    /*
       Exactly one full screen before Explore begins.
    */

    margin:
        100vh
        auto
        0 !important;

    width:
        min(
            1180px,
            calc(100% - 70px)
        ) !important;

    min-height:
        100vh !important;

    padding:
        100px
        0
        150px !important;

    box-sizing:
        border-box !important;

    /*
       Screen 2 is completely black.
    */

    background:
        #000 !important;

    z-index:
        4 !important;
}


/*
   Extend the black background beyond the grid
   all the way across the browser.
*/

.landing-explore::before {
    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 100vw;
    height: 100%;

    transform:
        translateX(-50%);

    background:
        #000;

    z-index:
        -1;

    pointer-events:
        none;
}


/* ======================================================
   EXPLORE CONTENT
   ====================================================== */

.explore-header,
.explore-grid {
    position:
        relative;

    z-index:
        5;
}


/* ======================================================
   MAKE SURE FIRST SCREEN ELEMENTS DON'T MOVE
   ====================================================== */

.landing-content,
.landing-actions {
    /*
       These belong specifically to the first 100vh.
       Scrolling naturally moves them away with Screen 1.
    */

    transform-origin:
        center center;
}


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

@media (max-width: 700px) {

    .landing-content {
        width:
            calc(100% - 40px) !important;
    }


    .landing-actions {
        bottom:
            45px !important;

        gap:
            20px !important;
    }


    .landing-explore {
        width:
            calc(100% - 36px) !important;

        padding-top:
            75px !important;
    }

}

/* ======================================================
   LANDING FINAL POSITION / BACKGROUND FIX
   ====================================================== */


/* Restore original first-screen background */
.landing-page {
    background-color: #000 !important;

    background-image:
        url("corner-scene.png") !important;

    background-size:
        100% 100vh !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center top !important;

    background-attachment:
        local !important;
}


/*
   Disable the temporary background layer from
   the previous fix.
*/
.landing-page::before {
    display: none !important;
}


/* ======================================================
   RESTORE ORIGINAL CENTER CONTENT
   ====================================================== */

.landing-content {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    margin: 0 !important;

    text-align: center !important;
}


/* ======================================================
   RESTORE BUTTON POSITION
   ====================================================== */

.landing-actions {
    position: absolute !important;

    left: 50% !important;

    /*
       Move them back down closer to their
       original position.
    */
    bottom: 32px !important;

    transform:
        translateX(-50%) !important;

    gap: 38px !important;
}


/* ======================================================
   KEEP SECOND PAGE PURE BLACK
   ====================================================== */

.landing-explore {
    background: #000 !important;
}


.landing-explore::before {
    content: "";

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;

    left: 50% !important;

    width: 100vw !important;

    transform:
        translateX(-50%) !important;

    background:
        #000 !important;

    z-index:
        -1 !important;

    pointer-events:
        none !important;
}

/* ======================================================
   FINAL LANDING + ABOUT PAGE FIX
   ====================================================== */

.landing-page {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #000 !important;
    z-index: 5000 !important;
    scroll-behavior: smooth;
}

/* Do not use the landing container pseudo-element as the scene. */
.landing-page::before { display: none !important; }

/* Cursor light stays fixed to the viewport on every landing section. */
.landing-page::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    background: radial-gradient(circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 35%, transparent 70%) !important;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 50 !important;
}
.landing-page:hover::after { opacity: 1; }

.landing-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background-color: #000;
    background-image: url("landing-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center calc(50% - 50px);
}

.landing-hero .landing-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: min(600px, 90vw) !important;
    transform: translate(-50%, calc(-50% - 25px)) !important;
    margin: 0 !important;
    z-index: 5 !important;
}

.landing-hero .landing-actions {
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    gap: 34px !important;
    z-index: 5 !important;
}

.landing-explore {
    position: relative !important;
    width: min(1180px, calc(100% - 70px)) !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 105px 0 150px !important;
    background: #000 !important;
    z-index: 5 !important;
}
.landing-explore::before {
    content: "";
    position: absolute !important;
    inset: 0 auto 0 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background: #000 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* ABOUT PAGE */
.about-page {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: none;
    overflow-y: auto;
    background: #000;
    color: #fff;
    font-family: "Omori", monospace;
}
.about-page.open { display: block; animation: aboutPageIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes aboutPageIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.about-back {
    position: fixed; top: 28px; left: 34px; z-index: 3; border: 0; background: transparent; color: rgba(255,255,255,.5);
    font: 23px "Omori", monospace; cursor: pointer; transition: color .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.about-back:hover { color: #fff; transform: scale(1.15); }
.about-shell { width: min(1100px, calc(100% - 70px)); margin: 0 auto; padding: 110px 0 120px; }
.about-heading { text-align: center; margin-bottom: 65px; }
.about-heading > p { color: rgba(255,255,255,.35); font-size: 17px; letter-spacing: 2px; margin-bottom: 12px; }
.about-heading h1 { font: normal 58px "Omori", monospace; letter-spacing: 2px; }
.about-line { width: 45px; height: 1px; margin: 27px auto 0; background: rgba(255,255,255,.18); }
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.about-card { min-height: 260px; padding: 30px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.008); transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .25s ease; }
.about-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.25); }
.about-card-main { grid-row: span 2; min-height: 538px; display: flex; flex-direction: column; justify-content: flex-end; }
.about-card-number { display: block; color: rgba(255,255,255,.22); font-size: 17px; margin-bottom: auto; }
.about-kicker { color: rgba(255,255,255,.35); font-size: 15px; letter-spacing: 1.5px; margin-bottom: 15px; }
.about-card h2 { margin: 0 0 18px; color: #fff; font: normal 31px "Omori", monospace; }
.about-copy { max-width: 560px; color: rgba(255,255,255,.5); font-size: 20px; line-height: 1.45; }
.about-contact-list { margin-top: 30px; }
.about-contact-list > div { display: flex; justify-content: space-between; gap: 25px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 19px; }
.about-contact-list span { color: rgba(255,255,255,.35); }
.about-contact-list strong { color: rgba(255,255,255,.75); font-weight: normal; text-align: right; }
@media (max-width: 760px) {
    .about-shell { width: calc(100% - 36px); padding-top: 90px; }
    .about-grid { grid-template-columns: 1fr; }
    .about-card-main { grid-row: auto; min-height: 350px; }
    .about-heading h1 { font-size: 46px; }
}

/* ======================================================
   ENTER VAULT VISIBILITY FIX
   ====================================================== */

/* Landing is visible by default. */
body:not(.vault-open) .landing-page {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* When Enter is pressed, the landing layer must actually leave the screen. */
body.vault-open .landing-page {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Reveal the vault and make it interactive. */
body.vault-open .vault-interface,
body.vault-open .vault-shell {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* ======================================================
   HOME DRAG / DROP ZONE
   Keeps Recent Files hidden on Home while restoring a
   permanent upload/drop target.
   ====================================================== */

.home-drop-section {
    display: none;
}

body.vault-home .home-drop-section {
    display: block !important;
    width: 100%;
    margin-top: 28px;
}

body:not(.vault-home) .home-drop-section {
    display: none !important;
}

.home-drop-zone {
    width: 100%;
    min-height: 150px;
    padding: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 0;
    outline: none;

    background: transparent;
    color: rgba(255, 255, 255, 0.34);

    font-family: "Omori", monospace;
    cursor: pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s cubic-bezier(.22, 1, .36, 1),
        color .25s ease;
}

.home-drop-zone:hover,
.home-drop-zone.dragging {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.015);
    color: rgba(255, 255, 255, 0.75);
    transform: translateY(-2px);
}

.home-drop-zone.dragging {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.025);
}

.home-drop-icon {
    margin-bottom: 3px;
    font-size: 34px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.34);
}

.home-drop-zone strong {
    font-size: 27px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.68);
}

.home-drop-zone > span:last-child {
    margin-top: 2px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.28);
}

.home-drop-zone.dragging .home-drop-icon,
.home-drop-zone.dragging strong {
    color: #fff;
}

/* ======================================================
   HOME FILE CARDS + PREVIEW RESTORE
   Keep the Home folder layout, but show uploaded cards
   below the dedicated drop zone without a "recent files"
   heading. The preview marker is visible again too.
   ====================================================== */

body.vault-home .files-section {
    display: block !important;
    margin-top: 34px !important;
}

body.vault-home .files-section .section-header {
    display: none !important;
}

body.vault-home .file-grid {
    display: grid !important;
}

body.vault-home .vault-preview-zone {
    display: block !important;
}

/* The dedicated Home drop zone already explains uploading,
   so don't show the large empty-state box underneath it. */
body.vault-home .empty-files {
    display: none !important;
}

/* Category pages keep the normal file heading/empty state. */
body:not(.vault-home) .files-section .section-header {
    display: flex !important;
}

/* ======================================================
   CATEGORY VIEW STATE
   ====================================================== */

body:not(.vault-home) .home-drop-section,
body:not(.vault-home) .vault-folders {
    display: none !important;
}

body:not(.vault-home) .files-section,
body:not(.vault-home) .vault-preview-zone {
    display: block !important;
}


/* ==========================================================
   YZOR PROFILE WINDOW — OMORI FONT + CLEAN ENTRANCE
   Isolated overrides only; existing site UI is untouched.
   ========================================================== */

.yzor-profile-overlay,
.yzor-profile-overlay *,
.yzor-profile-window,
.yzor-profile-window input,
.yzor-profile-window textarea,
.yzor-profile-window button {
    font-family: "Omori", monospace !important;
}

/* Fade/blur the backdrop in instead of appearing instantly. */
.yzor-profile-overlay.open {
    animation: yzorProfileBackdropIn 0.22s ease-out both;
}

/* Soft rise + scale entrance for the account card. */
.yzor-profile-overlay.open .yzor-profile-window {
    transform-origin: 50% 52%;
    animation: yzorProfileWindowIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Slightly tune text sizing for the OMORI face. */
.yzor-profile-heading {
    font-size: 38px !important;
    line-height: 1 !important;
}

.yzor-profile-role {
    font-size: 21px !important;
}

.yzor-profile-label {
    font-size: 20px !important;
}

.yzor-profile-input,
.yzor-profile-textarea {
    font-size: 22px !important;
}

.yzor-profile-help,
.yzor-profile-created,
.yzor-profile-message {
    font-size: 18px !important;
}

.yzor-profile-button {
    font-size: 21px !important;
}

@keyframes yzorProfileBackdropIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

@keyframes yzorProfileWindowIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.965);
        filter: blur(2px);
    }

    55% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .yzor-profile-overlay.open,
    .yzor-profile-overlay.open .yzor-profile-window {
        animation: none !important;
    }
}


/* ==========================================================
   YZOR DEDICATED PROFILE PAGE
   ========================================================== */

.yzor-profile-page {
    position: fixed;
    inset: 0;
    z-index: 6500;
    display: none;
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.025), transparent 32%),
        #000;
    color: #fff;
    font-family: "Omori", monospace;
}

.yzor-profile-page.open {
    display: block;
    animation: yzorProfilePageIn .42s cubic-bezier(.22,1,.36,1) both;
}

@keyframes yzorProfilePageIn {
    from {
        opacity: 0;
        transform: translateX(24px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.yzor-profile-page-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    width: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(26px, 5vw, 72px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.yzor-profile-page-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.86);
    font: 26px "Omori", monospace;
    cursor: pointer;
}

.yzor-profile-page-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: invert(1);
    opacity: .92;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}

.yzor-profile-page-brand:hover .yzor-profile-page-logo {
    transform: rotate(-6deg) scale(1.08);
}

.yzor-profile-page-back,
.yzor-profile-page-edit {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    font: 21px "Omori", monospace;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.yzor-profile-page-back:hover,
.yzor-profile-page-edit:hover {
    color: #fff;
    transform: translateY(-1px);
}

.yzor-profile-page-shell {
    width: min(1180px, calc(100% - 70px));
    margin: 0 auto;
    padding: clamp(65px, 9vh, 110px) 0 90px;
}

.yzor-profile-page-hero {
    position: relative;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 5vw, 70px);
    min-height: 250px;
}

.yzor-profile-page-avatar-frame {
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    background: #050505;
    box-shadow: 0 18px 70px rgba(0,0,0,.45);
}

.yzor-profile-page-avatar {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
}

.yzor-profile-page-avatar-fallback {
    color: rgba(255,255,255,.24);
    font-size: 72px;
}

.yzor-profile-page-kicker,
.yzor-profile-page-lower-label {
    margin: 0 0 9px;
    color: rgba(255,255,255,.32);
    font-size: 15px;
    letter-spacing: 3px;
}

.yzor-profile-page-identity h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 400;
    line-height: .9;
    overflow-wrap: anywhere;
}

.yzor-profile-page-username {
    margin: 12px 0 7px;
    color: rgba(255,255,255,.55);
    font-size: 25px;
}

.yzor-profile-page-role {
    display: inline-block;
    color: var(--accent, #8b5cf6);
    font-size: 19px;
}

.yzor-profile-page-bio {
    max-width: 650px;
    margin: 17px 0 0;
    color: rgba(255,255,255,.55);
    font-size: 21px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.yzor-profile-page-edit {
    align-self: end;
    margin-bottom: 17px;
    white-space: nowrap;
}

.yzor-profile-page-rule {
    height: 1px;
    margin: clamp(50px, 7vh, 80px) 0 0;
    background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.035));
}

.yzor-profile-page-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yzor-profile-page-detail {
    min-height: 145px;
    padding: 31px 28px 28px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.yzor-profile-page-detail + .yzor-profile-page-detail {
    padding-left: 28px;
    border-left: 1px solid rgba(255,255,255,.08);
}

.yzor-profile-page-detail span {
    display: block;
    margin-bottom: 12px;
    color: rgba(255,255,255,.3);
    font-size: 16px;
    letter-spacing: 1px;
}

.yzor-profile-page-detail strong {
    display: block;
    color: rgba(255,255,255,.88);
    font-size: 25px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.yzor-profile-page-lower {
    display: grid;
    grid-template-columns: minmax(180px, .45fr) 1fr;
    gap: 50px;
    padding: 55px 0 20px;
}

.yzor-profile-page-lower h2 {
    margin: 0;
    color: #fff;
    font-size: 42px;
    font-weight: 400;
}

.yzor-profile-page-bio-large {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 25px;
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 820px) {
    .yzor-profile-page-shell {
        width: min(100% - 38px, 1180px);
        padding-top: 50px;
    }

    .yzor-profile-page-hero {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 24px;
    }

    .yzor-profile-page-avatar-frame {
        width: 110px;
        height: 110px;
    }

    .yzor-profile-page-edit {
        grid-column: 1 / -1;
        justify-self: start;
        margin: 5px 0 0;
    }

    .yzor-profile-page-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yzor-profile-page-detail:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .yzor-profile-page-lower {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 520px) {
    .yzor-profile-page-topbar {
        min-height: 74px;
        padding: 0 20px;
    }

    .yzor-profile-page-brand span {
        display: none;
    }

    .yzor-profile-page-hero {
        grid-template-columns: 1fr;
    }

    .yzor-profile-page-avatar-frame {
        width: 128px;
        height: 128px;
    }

    .yzor-profile-page-details {
        grid-template-columns: 1fr;
    }

    .yzor-profile-page-detail,
    .yzor-profile-page-detail + .yzor-profile-page-detail,
    .yzor-profile-page-detail:nth-child(3) {
        padding: 24px 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yzor-profile-page.open {
        animation: none !important;
    }
}


/* ==========================================================
   YZOR PROFILE PAGE — POLISH PASS
   Softer metadata, closer bio, ambient lighting.
   ========================================================== */

/* Give the page a little depth without losing the black yzor look. */
.yzor-profile-page {
    background:
        radial-gradient(
            ellipse 680px 440px at 38% 28%,
            color-mix(in srgb, var(--accent) 7%, transparent),
            transparent 72%
        ),
        radial-gradient(
            ellipse 520px 300px at 68% 18%,
            rgba(255,255,255,.025),
            transparent 75%
        ),
        #000;
}

/* A soft pool of light around the identity area. */
.yzor-profile-page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -90px;
    top: -95px;
    width: min(850px, 78vw);
    height: 440px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 42% 50%,
            color-mix(in srgb, var(--accent) 9%, transparent) 0%,
            rgba(255,255,255,.018) 34%,
            transparent 72%
        );
    filter: blur(14px);
    opacity: .85;
}

.yzor-profile-page-hero {
    isolation: isolate;
}

/* Slightly soften the avatar so it doesn't feel like a hard box. */
.yzor-profile-page-avatar-frame {
    border-color: rgba(255,255,255,.13);
    background: rgba(8,8,8,.72);
    box-shadow:
        0 24px 75px rgba(0,0,0,.48),
        0 0 45px color-mix(in srgb, var(--accent) 4%, transparent);
}

/* Make the main divider lighter and less rigid. */
.yzor-profile-page-rule {
    margin-top: clamp(46px, 6vh, 70px);
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.045) 55%,
            transparent
        );
}

/* Metadata should read as information, not four boxed cells. */
.yzor-profile-page-details {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    padding: 31px 0 35px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.yzor-profile-page-detail,
.yzor-profile-page-detail + .yzor-profile-page-detail,
.yzor-profile-page-detail:nth-child(3) {
    min-height: 0;
    padding: 0;
    border: 0;
}

.yzor-profile-page-detail span {
    margin-bottom: 8px;
    color: rgba(255,255,255,.27);
    font-size: 15px;
    letter-spacing: 1.15px;
}

.yzor-profile-page-detail strong {
    color: rgba(255,255,255,.82);
    font-size: 24px;
    line-height: 1.15;
}

/* Turn the lower area into one cohesive About/Bio block. */
.yzor-profile-page-lower {
    display: block;
    max-width: 760px;
    padding: 43px 0 28px;
}

.yzor-profile-page-lower > div {
    margin: 0 0 13px;
}

.yzor-profile-page-lower-label {
    margin-bottom: 5px;
    opacity: .85;
}

.yzor-profile-page-lower h2 {
    margin: 0;
    font-size: 38px;
    line-height: 1;
}

.yzor-profile-page-bio-large {
    max-width: 720px;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.61);
    font-size: 24px;
    line-height: 1.45;
}

/* A little more air around the hero without making it sparse. */
.yzor-profile-page-shell {
    padding-top: clamp(68px, 8vh, 100px);
}

.yzor-profile-page-bio {
    color: rgba(255,255,255,.5);
}

/* Refine interactive text so it feels less detached. */
.yzor-profile-page-edit,
.yzor-profile-page-back {
    color: rgba(255,255,255,.48);
}

.yzor-profile-page-edit:hover,
.yzor-profile-page-back:hover {
    color: rgba(255,255,255,.92);
    text-shadow: 0 0 18px rgba(255,255,255,.08);
}

/* Responsive cleanup for the softer metadata layout. */
@media (max-width: 820px) {
    .yzor-profile-page-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 38px;
    }

    .yzor-profile-page-lower {
        max-width: 100%;
        padding-top: 38px;
    }
}

@media (max-width: 520px) {
    .yzor-profile-page-details {
        grid-template-columns: 1fr;
        gap: 23px;
        padding: 28px 0 31px;
    }

    .yzor-profile-page-detail,
    .yzor-profile-page-detail + .yzor-profile-page-detail,
    .yzor-profile-page-detail:nth-child(3) {
        padding: 0;
        border: 0;
    }

    .yzor-profile-page-lower {
        padding-top: 34px;
    }

    .yzor-profile-page-hero::before {
        left: -120px;
        width: 620px;
        opacity: .65;
    }
}


/* ==========================================================
   YZOR AVATAR CROP + ZOOM
   Isolated profile-picture editor.
   ========================================================== */

.yzor-avatar-crop-overlay,
.yzor-avatar-crop-overlay * {
    box-sizing: border-box;
    font-family: "Omori", monospace;
}

.yzor-avatar-crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.yzor-avatar-crop-overlay.open {
    display: flex;
    animation: yzorAvatarCropBackdropIn .2s ease-out both;
}

.yzor-avatar-crop-window {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px;
    border: 1px solid rgba(255,255,255,.13);
    background:
        radial-gradient(
            circle at 50% 20%,
            color-mix(in srgb, var(--accent) 7%, transparent),
            transparent 42%
        ),
        #050505;
    color: #fff;
    box-shadow: 0 28px 100px rgba(0,0,0,.72);
    animation: yzorAvatarCropWindowIn .3s cubic-bezier(.22,1,.36,1) both;
}

.yzor-avatar-crop-close {
    position: absolute;
    top: 14px;
    right: 17px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.48);
    font-size: 27px;
    cursor: pointer;
}

.yzor-avatar-crop-close:hover {
    color: #fff;
}

.yzor-avatar-crop-heading {
    padding-right: 36px;
    margin-bottom: 25px;
}

.yzor-avatar-crop-heading p {
    margin: 0 0 5px;
    color: var(--accent);
    font-size: 14px;
    letter-spacing: 2.4px;
}

.yzor-avatar-crop-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
}

.yzor-avatar-crop-heading span {
    display: block;
    margin-top: 9px;
    color: rgba(255,255,255,.38);
    font-size: 18px;
}

.yzor-avatar-crop-stage {
    position: relative;
    width: min(380px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        #090909;
    background-size: 24px 24px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.yzor-avatar-crop-stage.dragging {
    cursor: grabbing;
}

.yzor-avatar-crop-stage img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    pointer-events: none;
    user-select: none;
    will-change: width, height, transform;
}

.yzor-avatar-crop-guide {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.09),
        inset 0 0 55px rgba(0,0,0,.15);
}

.yzor-avatar-crop-guide::before,
.yzor-avatar-crop-guide::after {
    content: "";
    position: absolute;
    background: rgba(255,255,255,.09);
}

.yzor-avatar-crop-guide::before {
    left: 33.333%;
    top: 0;
    width: 1px;
    height: 100%;
    box-shadow: calc(100% * 1) 0 0 rgba(255,255,255,.09);
}

.yzor-avatar-crop-guide::after {
    left: 0;
    top: 33.333%;
    width: 100%;
    height: 1px;
    box-shadow: 0 126px 0 rgba(255,255,255,.09);
    opacity: 0;
}

.yzor-avatar-crop-control {
    width: min(380px, 100%);
    margin: 23px auto 0;
}

.yzor-avatar-crop-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    color: rgba(255,255,255,.48);
    font-size: 18px;
}

.yzor-avatar-crop-control-row strong {
    color: rgba(255,255,255,.7);
    font-weight: 400;
}

#yzorAvatarCropZoom {
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background: rgba(255,255,255,.13);
    cursor: pointer;
}

#yzorAvatarCropZoom::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

#yzorAvatarCropZoom::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.yzor-avatar-crop-hint {
    width: min(380px, 100%);
    margin: 8px auto 0;
    color: rgba(255,255,255,.27);
    font-size: 15px;
}

.yzor-avatar-crop-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(380px, 100%);
    margin: 26px auto 0;
}

.yzor-avatar-crop-actions button {
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.48);
    font-size: 19px;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

.yzor-avatar-crop-actions button:hover {
    color: #fff;
    transform: translateY(-1px);
}

.yzor-avatar-crop-actions .yzor-avatar-crop-use {
    margin-left: auto;
    color: var(--accent);
}

.yzor-avatar-crop-actions button:disabled {
    opacity: .45;
    cursor: default;
    transform: none;
}

@keyframes yzorAvatarCropBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes yzorAvatarCropWindowIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.975);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 520px) {
    .yzor-avatar-crop-overlay {
        padding: 12px;
    }

    .yzor-avatar-crop-window {
        padding: 25px 18px;
    }

    .yzor-avatar-crop-actions {
        gap: 12px;
    }

    .yzor-avatar-crop-actions button {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yzor-avatar-crop-overlay.open,
    .yzor-avatar-crop-window {
        animation: none !important;
    }
}



/* ==========================================================
   YZOR AVATAR CROPPER — PERFORMANCE PASS
   Keep drag/zoom on the compositor instead of relayout.
   ========================================================== */

.yzor-avatar-crop-stage {
    contain: layout paint;
}

.yzor-avatar-crop-stage img {
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: auto;
}

/* The blur is attractive, but disabling it only while the cropper
   is open removes a costly full-screen repaint during dragging. */
.yzor-avatar-crop-overlay.open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,.86);
}

.yzor-avatar-crop-window {
    transform: translateZ(0);
}


/* ==========================================================
   YZOR — ROUNDED UI PASS
   Added as isolated overrides so existing layout/behavior stays intact.
   ========================================================== */

:root {
    --radius: 16px;
    --yzor-radius-xs: 8px;
    --yzor-radius-sm: 11px;
    --yzor-radius-md: 16px;
    --yzor-radius-lg: 22px;
    --yzor-radius-xl: 28px;
    --yzor-radius-pill: 999px;
}

/* ---------- PROFILE PICTURES: TRUE CIRCLES ---------- */

.yzor-profile-page-avatar-frame,
.yzor-profile-page-avatar,
.yzor-profile-avatar-wrap,
.yzor-profile-avatar-wrap img,
.yzor-profile-avatar,
.yzor-profile-avatar-preview {
    border-radius: 50% !important;
}

.yzor-profile-page-avatar-frame,
.yzor-profile-avatar-wrap {
    overflow: hidden !important;
}

/* Make the crop view match the circular result the user will see. */
.yzor-avatar-crop-stage,
.yzor-avatar-crop-guide {
    border-radius: 50% !important;
}

/* ---------- LOGIN / REGISTER ---------- */

/* The auth card is the direct UI surface inside the overlay. */
#yzorAuthOverlay > * {
    border-radius: var(--yzor-radius-xl) !important;
    overflow: hidden;
}

#yzorAuthOverlay input,
#yzorAuthOverlay textarea,
#yzorAuthOverlay select {
    border-radius: var(--yzor-radius-sm) !important;
}

#yzorAuthOverlay button {
    border-radius: var(--yzor-radius-sm) !important;
}

#yzorAuthSubmit {
    border-radius: var(--yzor-radius-md) !important;
}

/* ---------- PROFILE EDITOR + CROP WINDOW ---------- */

.yzor-profile-window {
    border-radius: var(--yzor-radius-xl) !important;
}

.yzor-profile-input,
.yzor-profile-textarea {
    border-radius: var(--yzor-radius-sm) !important;
}

.yzor-profile-button {
    border-radius: var(--yzor-radius-sm) !important;
}

.yzor-avatar-crop-window {
    border-radius: var(--yzor-radius-xl) !important;
}

.yzor-avatar-crop-actions button {
    border-radius: var(--yzor-radius-sm) !important;
}

/* ---------- VAULT CARDS / UPLOAD AREAS ---------- */

.vault-folders .folder-card,
body.vault-home .folder-card,
.vault-shell .file-card,
.file-card,
.empty-files,
.drop-message,
.home-drop-zone {
    border-radius: var(--yzor-radius-md) !important;
}

.file-preview,
.file-preview img,
.audio-card-artwork {
    border-radius: var(--yzor-radius-md) var(--yzor-radius-md) 0 0;
}

.folder-icon,
.file-type-icon,
.audio-card-fallback,
.empty-icon,
.drop-icon {
    border-radius: var(--yzor-radius-sm) !important;
}

/* ---------- PREVIEW / AUDIO ---------- */

.preview-window {
    border-radius: var(--yzor-radius-lg) !important;
}

.preview-image-area img {
    border-radius: var(--yzor-radius-md) !important;
}

.audio-preview,
.audio-artwork {
    border-radius: var(--yzor-radius-lg) !important;
}

.close-preview {
    border-radius: var(--yzor-radius-sm) !important;
}

/* ---------- SETTINGS / MENUS ---------- */

.settings-panel {
    border-radius: var(--yzor-radius-lg) 0 0 var(--yzor-radius-lg) !important;
}

.reset-theme,
.upload-button,
.search,
.vault-search-wrap,
input:not([type="range"]):not([type="color"]),
textarea,
select {
    border-radius: var(--yzor-radius-sm) !important;
}

/* ---------- BUTTONS / SMALL CONTROLS ---------- */

.nav-item:not(.vault-nav .nav-item),
.settings-button,
button.upload-button {
    border-radius: var(--yzor-radius-sm) !important;
}

/* Keep the intentionally text-only OMORI navigation visually text-only. */
.landing-button,
.vault-nav .nav-item,
.yzor-profile-page-back,
.yzor-profile-page-edit,
.yzor-profile-page-brand {
    border-radius: 0 !important;
}

/* ---------- PROFILE PAGE DETAILS ---------- */

.yzor-profile-page-role {
    padding: 4px 10px;
    border-radius: var(--yzor-radius-pill) !important;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.yzor-profile-page-detail {
    border-radius: var(--yzor-radius-sm);
}

/* ---------- RESPONSIVE ROUNDING ---------- */

@media (max-width: 600px) {
    .preview-window,
    .preview-window.audio-mode,
    .yzor-profile-window,
    .yzor-avatar-crop-window {
        border-radius: var(--yzor-radius-lg) !important;
    }
}


/* ======================================================
   YZOR — ACCOUNT MENU + SHARED SETTINGS / PROFILE NAV
   ====================================================== */

.yzor-account-menu {
    position: absolute;
    top: 76px;
    right: 34px;
    z-index: 10050;
    width: 205px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(5, 5, 6, 0.94);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(0.985);
    transform-origin: top right;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s ease;
    font-family: "Omori", monospace;
}

.yzor-account-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.yzor-account-menu button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.68);
    font: 18px "Omori", monospace;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        padding-left 0.15s ease;
}

.yzor-account-menu button:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    padding-left: 15px;
}

.yzor-account-menu-rule {
    height: 1px;
    margin: 7px 6px;
    background: rgba(255, 255, 255, 0.1);
}

.yzor-account-menu .yzor-account-menu-logout {
    color: rgba(255, 255, 255, 0.5);
}

.yzor-account-menu .yzor-account-menu-logout:hover {
    color: #fff;
}


/* ---------- PROFILE SIDEBAR ---------- */

.yzor-profile-sidebar {
    position: fixed;
    left: 28px;
    top: 50%;
    z-index: 3;
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
    font-family: "Omori", monospace;
}

.yzor-profile-sidebar button {
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.38);
    font: 17px "Omori", monospace;
    text-align: left;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background 0.15s ease,
        padding-left 0.15s ease;
}

.yzor-profile-sidebar button:hover,
.yzor-profile-sidebar button.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    padding-left: 14px;
}

.yzor-profile-sidebar .yzor-profile-sidebar-logout {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.28);
}


/* ---------- SHARED SETTINGS ---------- */

.yzor-settings-section-label {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.yzor-settings-appearance-label {
    margin-top: 30px;
}

.yzor-settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.yzor-settings-actions button {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.yzor-settings-actions button:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 980px) {
    .yzor-profile-sidebar {
        position: static;
        width: min(720px, calc(100% - 36px));
        margin: 10px auto 0;
        padding: 0 0 10px;
        flex-direction: row;
        overflow-x: auto;
        transform: none;
    }

    .yzor-profile-sidebar button {
        width: auto;
        white-space: nowrap;
    }

    .yzor-profile-sidebar .yzor-profile-sidebar-logout {
        margin-top: 0;
        margin-left: auto;
    }
}

@media (max-width: 520px) {
    .yzor-account-menu {
        top: 72px;
        right: 18px;
        width: min(210px, calc(100vw - 36px));
    }

    .yzor-settings-actions {
        grid-template-columns: 1fr;
    }
}