:root {
    --dark: #12140E;
    --light: #E3E3D8;
    --primary: #C5DD31;
    --secondary: #8CA8D8;
    --surface: #20231D;
    --dash-bar: #1A1D18;
    --dash-field: #292D26;
    --dash-card: var(--dash-bar);
    --dash-accent-soft: #303A20;
    --dash-action: #343A31;

    /* One restrained fluid type scale, independent of screen orientation. */
    font-size: clamp(15px, calc(12px + 0.2vw + 0.2vh), 18px);

    /* Reusable dimensions keep cards, forms, and navigation in proportion. */
    --space-1: 0.375rem;
    --space-2: 0.625rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-pill: 999px;
    --control-height: 3.125rem;
    --header-height: 4.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: var(--dark);
    color: var(--light);
    display: flex;
    flex-direction: column;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}
h1 {
    align-self: center;
    font-size: clamp(2.25rem, 3.33vw, 2.75rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 1.25rem 0 0;
}
p {
    align-self: center;
    color: color-mix(in srgb, var(--light) 70%, transparent);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 1rem auto 1.5rem;
    max-width: 34rem;
    text-align: center;
}
a {
    align-items: center;
    align-self: center;
    background: var(--primary);
    border-radius: var(--radius-pill);
    color: var(--dark);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: var(--space-2);
    justify-content: center;
    line-height: 1.25;
    margin-top: var(--space-3);
    min-height: var(--control-height);
    max-width: 100%;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: background 150ms ease, opacity 200ms ease;
    width: min(100%, 23rem);

    &.clear {
        background: transparent;
        color: var(--light);
        font-size: 0.8rem;
        font-weight: 500;
        margin-top: var(--space-2);
        min-height: 2.25rem;
        opacity: 0.65;
        padding: 0.375rem 0;
        pointer-events: none;
        width: 100%;

        & svg {
            stroke: currentColor;
        }
    }

    &:hover { opacity: 0.85; }
    &:hover:active { opacity: 0.5; }
    & span {
        align-self: center;
        pointer-events: none;
        
        &::selection {
            background: transparent;
        }
    }
    & svg {
        height: 1.25rem;
        padding: 0;
        pointer-events: none;
        stroke: currentColor;
        width: 1.25rem;
    }
    &:not(:has(svg)) {
        background: color-mix(in srgb, var(--primary) 75%, black);
    }
}
svg {
    background: transparent;
    border-radius: var(--radius-pill);
    box-sizing: content-box;
    flex-shrink: 0;
    height: 1.25rem;
    padding: 0.375rem;
    transition: background 200ms ease;
    width: 1.25rem;

    &.action:hover { background: hwb(0 100% 0% / 10%); }
    &.action:hover:active { background: hwb(0 100% 0% / 20%); }
}
input,
textarea {
    transition: color 333ms;
}

.logo {
    align-self: center;
    border: 0.2rem solid color-mix(in srgb, var(--primary) 40%, transparent);
    border-radius: 50%;
    flex-shrink: 0;
    height: 5rem;
    width: 5rem;
}
.hidden { display: none !important; }
.vault {
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 100%;
    padding: 2.5rem 1.5rem;
    width: 37rem;

    & p {
        margin-bottom: var(--space-3);
    }
    & a {
        width: 60%;
    }
}
.modal {
    align-items: center;
    backdrop-filter: blur(1rem);
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--space-3);
    position: fixed;
    z-index: 100;

    & .container {
        background: var(--surface);
        border-radius: var(--radius-md);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.55);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow: hidden;
        width: min(100%, 28rem);

        & .top {
            align-items: center;
            background: color-mix(in srgb, var(--surface) 60%, black);
            display: flex;
            flex-shrink: 0;
            gap: var(--space-2);
            padding: 1rem 1.25rem;

            & svg {
                height: 1.25rem;
                width: 1.25rem;

                &:first-of-type { color: var(--primary); }
                &:last-of-type { cursor: pointer; opacity: 0.6; }
                &:last-of-type:hover { opacity: 1; }
            }
            & h2 {
                font-size: 1.35rem;
                font-weight: 700;
                line-height: 1.25;
                margin: 0 auto 0;
            }
        }
        & .mid {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow-y: auto;
            padding: var(--space-4);

            & input,
            & textarea,
            & select {
                appearance: none;
                background: color-mix(in srgb, var(--surface) 60%, black);
                border: 0;
                border-radius: var(--radius-sm);
                color: var(--light);
                font-family: inherit;
                font-size: 1rem;
                line-height: 1.5;
                min-width: 0;
                outline: none;
                padding: 0.75rem 1rem;
                resize: none;
                transition: background 200ms ease;
                width: 100%;

                &:focus {
                    background: color-mix(in srgb, var(--surface) 40%, black);
                }
            }
            & input,
            & select {
                height: var(--control-height);
            }
            & a {
                max-width: 100%;
                width: 100%;

                &:not(.clear) { margin-top: var(--space-4); }
                &.clear { margin-top: var(--space-2); }
            }
        }
    }
    &.actions {
        & .mid a {
            background: color-mix(in srgb, var(--surface) 80%, white);
            color: var(--light);
            font-size: 0.95rem;
            font-weight: 600;
            min-height: var(--control-height);
            margin-top: var(--space-2);
            padding: 0.75rem 1rem;

            &:first-of-type { margin-top: 0; }
            &:hover {
                background: #444D3D;
                opacity: 1;
            }
            &:hover:active {
                background: #56624B;
                opacity: 1;
            }
        }
    }
}
.modal.auth {
    & .container {
        width: clamp(320px, 50vw, 400px);
        max-width: 95vw;
    }
}
.modal.create {
    & .mid {
        & small {
            color: color-mix(in srgb, var(--light) 68%, transparent);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            line-height: 1.25;
            margin: var(--space-3) 0 var(--space-2);
            text-align: left;
            text-transform: uppercase;

            &:first-of-type { margin-top: 0; }
        }

        & select { cursor: pointer; }

        & textarea {
            min-height: 7rem;
        }

        &:has(select option:first-child:checked) textarea {
            cursor: pointer;
        }
    }
}
.dash {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;

    & .top {
        align-items: center;
        background: var(--dash-bar);
        display: flex;
        gap: clamp(0.625rem, 2vw, 1.5rem);
        height: var(--header-height);
        inset: 0 0 auto;
        padding: 0 clamp(1rem, 4vw, 4rem);
        position: fixed;
        width: 100%;
        z-index: 10;

        & img {
            cursor: pointer;
            height: 3rem;
            width: 3rem;
        }
        & div {
            align-items: center;
            background: var(--dash-field);
            border-radius: var(--radius-pill);
            color: var(--light);
            display: flex;
            flex: 1;
            gap: var(--space-2);
            height: var(--control-height);
            min-width: 0;
            padding: 0 1rem;
            transition: background 150ms ease;

            &:hover,
            &:focus-within {
                background: #343A30;
            }

            & svg {
                height: 1.25rem;
                opacity: 0.75;
                padding: 0;
                width: 1.25rem;
            }

            & input {
                background: transparent;
                border: 0;
                color: var(--light);
                flex: 1;
                font-family: inherit;
                font-size: 1rem;
                height: 100%;
                line-height: 1.25;
                margin: 0;
                min-width: 0;
                outline: none;
                padding: 0;
                width: 100%;
            }
        }
        & a {
            flex-shrink: 0;
            height: var(--control-height);
            margin: 0;
            padding: 0 1.75rem;
            width: auto;

            & svg {
                margin: 0;
            }
        }
    }

    & .accounts {
        align-self: center;
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: var(--space-3);
        max-width: 90rem;
        min-width: 0;
        padding: calc(var(--header-height) + 1.5rem) clamp(1rem, 4vw, 4rem) 2.5rem;
        width: 100%;
    }
}
.account {
    background: transparent;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;

    & .entry {
        align-items: center;
        background: var(--dash-card);
        border: none;
        border-radius: var(--radius-pill);
        cursor: pointer;
        display: flex;
        gap: var(--space-3);
        max-width: 100%;
        min-height: 5.5rem;
        min-width: 0;
        overflow: hidden;
        padding: 0.75rem 1rem;
        width: 100%;
    }

    & .meta {
        align-items: center;
        background: var(--dash-accent-soft);
        border-radius: var(--radius-pill);
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        font-size: 0.8rem;
        gap: 0.25rem;
        justify-content: center;
        letter-spacing: 0.06em;
        line-height: 1.3;
        min-height: 3.75rem;
        padding: 0.5rem 0.75rem;
        text-align: center;
        text-transform: uppercase;
        width: 9rem;

        & span:first-child {
            color: var(--primary);
            font-weight: 700;
        }

        & span:last-child {
            color: var(--light);
            font-size: 0.75rem;
            letter-spacing: 0;
            opacity: 0.85;
            text-transform: none;
        }
    }

    & .content {
        background: transparent;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: 0;

        & h3 {
            color: var(--light);
            font-size: 1.1rem;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            text-transform: capitalize;
            white-space: nowrap;
        }
        & p {
            align-self: stretch;
            color: color-mix(in srgb, var(--light) 75%, transparent);
            font-family: monospace;
            font-size: 0.9rem;
            letter-spacing: 0.015em;
            line-height: 1.4;
            margin: 0.25rem 0 0;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
            padding: 0;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
    }
    & .actions {
        align-items: center;
        background: transparent;
        display: flex;
        flex-shrink: 0;
        gap: var(--space-2);
        justify-content: flex-end;
        line-height: 1;
        padding: 0;

        & a {
            background: var(--dash-action);
            border: 0;
            border-radius: var(--radius-pill);
            color: var(--light);
            font-size: 0.85rem;
            font-weight: 600;
            height: 2.5rem;
            line-height: 1;
            margin: 0;
            min-height: 0;
            min-width: 0;
            padding: 0 1rem;
            transition: background 150ms ease, opacity 200ms ease;
            white-space: nowrap;
            width: auto;

            &:hover {
                background: #444D3D;
                opacity: 1;
            }

            &:hover:active {
                background: #56624B;
                opacity: 1;
            }

            &:has(svg) {
                aspect-ratio: 1;
                border-radius: 50%;
                display: none;
                padding: 0;

                & svg {
                    height: 1.25rem;
                    margin: 0;
                    padding: 0;
                    stroke: currentColor;
                    width: 1.25rem;
                }
            }
        }
    }
    & .notepad {
        background: var(--dash-bar);
        border-radius: var(--radius-md);
        color: var(--light);
        font-family: monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        margin-top: var(--space-2);
        max-height: 50vh;
        overflow: auto;
        padding: 1rem 1.5rem;
        white-space: pre-wrap;
        width: 100%;
    }
}
.toast {
    position: fixed;
    bottom: -10vh;
    left: 50%;
    transform: translateX(-50%);
    padding: 1em 2em;
    border-radius: 100vmax;
    color: var(--dark);
    background: var(--light);
    z-index: 999;
    transition: bottom 333ms;
}
.active {
    bottom: 5vh;
}
.obfuscate {
    color: transparent !important;
}

[disabled] {
    opacity: 0.33 !important;
    pointer-events: none !important;
}

@media (width <= 760px) {
    .account .actions {
        & a:not(:has(svg)) { display: none; }
        & a:has(svg) { display: flex; }
    }
}
@media (width < 480px) {
    .dash .top {
        & img {
            height: 2.5rem;
            width: 2.5rem;
        }

        & div { padding: 0 0.75rem; }

        & a {
            aspect-ratio: 1;
            justify-content: center;
            padding: 0;
            width: var(--control-height);

            & span { display: none; }
        }
    }
    .account {
        & .entry {
            gap: var(--space-2);
            padding: 0.625rem;
        }

        & .meta {
            font-size: 0.72rem;
            min-height: 3.5rem;
            padding: 0.5rem 0.375rem;
            width: 6.75rem;

            & span:last-child { font-size: 0.68rem; }
        }

        & .content h3 { font-size: 1rem; }
    }
}
@media (max-height: 560px) {
    .modal { align-items: flex-start; }
}

#input-key {
    -webkit-text-security: disc;
}
.empty {
    align-items: center;
    color: var(--light);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: auto;
    opacity: 0.45;
    padding: 4rem 1rem;
    pointer-events: none;

    & svg {
        height: 3rem;
        width: 3rem;
    }
}