body {
    margin: 0;
    background: #111;
    color: #eee;
    font-family: monospace;
    display: grid;
    grid-template-rows: 60px 1fr;
    height: 100vh;
    width: 100%;
    font-size: 20px;
}

body.s {
    grid-template-areas:
        "header"
        "main";
    grid-template-columns: 1fr;
}

body.admin {
    grid-template-areas:
        "header header"
        "aside main";
    grid-template-columns: 300px 1fr;
}

header {
    grid-area: header;
    height: 60px;
}

header > #logo {
    height: calc(100% - 20px);
    margin: 20px;
    pointer-events: none;
    user-select: none;
}

header > #partner-logo {
    user-select: none;
    height: calc(100% - 20px);
    margin: 20px;
    float: right;
    pointer-events: none;
    filter: brightness(0) saturate(100%) invert(0.4);
}

body.admin > aside {
    grid-area: aside;
    margin: 20px;
    margin-right: 0;
}

.share > div {
    margin-left: 40px;
}

body.admin > aside div,
.share > div > div {
    padding: 10px;
    font-size: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: background 0.3s;
}

body.admin > aside div:hover,
.share > div > div:hover {
    background: #222;
    cursor: pointer;
}

body.s > aside {
    display: none;
}

main {
    grid-area: main;
    margin: 20px;
    padding: 20px;
    background: #181818;
    border-radius: 8px;
    overflow: auto;
}

body.s > main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition:
        border-color 0.3s,
        background-color 0.3s;
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(80%, 500px) min(80%, 500px);
}

body.s > main.ready {
    cursor: pointer;
    border: 2px dashed #444;
    background-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" color="%23666" xmlns="http://www.w3.org/2000/svg"><path d="M13 24C13 23.4477 13.4477 23 14 23H23V14C23 13.4477 23.4477 13 24 13C24.5523 13 25 13.4477 25 14V23H34C34.5523 23 35 23.4477 35 24C35 24.5523 34.5523 25 34 25H25V34C25 34.5523 24.5523 35 24 35C23.4477 35 23 34.5523 23 34V25H14C13.4477 25 13 24.5523 13 24Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z" fill="currentColor"/></svg>');
}

body.s > main.success {
    background-color: #008800;
    background-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" color="%23fff" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42ZM24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M34.6709 16.2585C35.0805 16.629 35.1121 17.2614 34.7415 17.6709L21.3858 32.4325L13.3095 24.7234C12.91 24.342 12.8953 23.709 13.2766 23.3095C13.658 22.91 14.291 22.8953 14.6905 23.2767L21.2809 29.5675L33.2585 16.3291C33.629 15.9196 34.2614 15.8879 34.6709 16.2585Z" fill="currentColor"/></svg>');
}

body.s > main.success::after,
body.s > main.error::after {
    color: #fff;
}

body.s > main.error {
    background-color: #880000;
    background-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" color="%23fff" xmlns="http://www.w3.org/2000/svg"><path d="M16.2218 31.7782C15.8313 31.3877 15.8313 30.7545 16.2218 30.364L22.5858 24L16.2218 17.636C15.8313 17.2455 15.8313 16.6123 16.2218 16.2218C16.6124 15.8313 17.2455 15.8313 17.6361 16.2218L24 22.5858L30.364 16.2218C30.7545 15.8313 31.3877 15.8313 31.7782 16.2218C32.1687 16.6123 32.1687 17.2455 31.7782 17.636L25.4142 24L31.7782 30.364C32.1687 30.7545 32.1687 31.3877 31.7782 31.7782C31.3877 32.1687 30.7545 32.1687 30.364 31.7782L24 25.4142L17.6361 31.7782C17.2455 32.1687 16.6124 32.1687 16.2218 31.7782Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z" fill="currentColor"/></svg>');
}

body.s > main.ready.dragover {
    background-color: #222;
    border-color: #888;
    cursor: copy;
}

body.s > main.dragover {
    cursor: not-allowed;
}

body.s > main.ready:hover {
    background-color: #222;
    border-color: #666;
}

body.s > main::after {
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 100%;
    max-width: 90%;
    transform: translateX(-50%);
    color: #666;
    font-size: 20px;
    font-weight: 900;
    font-family: monospace;
}

body.s > main.ready::after {
    content: "Click or drag and drop files to upload (Maximum per file: 50MB)";
}

body.s > main.sing::after {
    content: "Uploading files...";
}

body.s > main.success::after {
    content: "Files encrypted and uploaded successfully!";
}

body.s > main.error::after {
    content: "Error uploading files. Please try again.";
}

body.s > main.error.invalid-share::after {
    content: "Invalid share link. Please check and try again.";
}

body.s > main:has(.loader)::after {
    content: "Encrypting and uploading files...";
}

body.s > main:has(.loader) /* Spinning background image */ {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' color='%23666' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}