@import url("/static/water.css");

:root {
    --alkula-bg: #08101a;
    --alkula-panel: #0d1723;
    --alkula-panel-hover: #111e2c;
    --alkula-border: #26384a;

    --alkula-text: #e8eef5;
    --alkula-muted: #8d9aa8;

    --alkula-green: #47d18c;
    --alkula-blue: #79aee8;
}

html {
    background: var(--alkula-bg);
    color-scheme: dark;
}

body {
    color: var(--alkula-text);
    background: var(--alkula-bg);
}

/* Navigation */

#nav {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--alkula-border);
}

#nav b {
    display: inline-flex;
    align-items: center;
    margin-right: auto !important;
}

#nav > a {
    margin: 0 !important;
    font-size: 0.95rem;
}

/* Replace the MicroBin image visually with a simple ALKULA mark */

#nav b > a:first-child {
    display: inline-flex;
    align-items: center;
    margin-right: 0.65rem;
    text-decoration: none;
}

#nav b > a:first-child img {
    display: none;
}

#nav b > a:first-child::before {
    content: "A";

    display: inline-grid;
    place-items: center;

    width: 2.1rem;
    height: 2.1rem;

    border: 2px solid var(--alkula-green);
    border-radius: 0.45rem;

    color: var(--alkula-green);

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;

    box-shadow: 0 0 14px rgba(71, 209, 140, 0.18);
}

/* Links */

a {
    color: var(--alkula-blue);
}

a:hover {
    color: var(--alkula-green);
}

/* Remove redundant ? links */

#settings sup {
    display: none;
}

/* Form */

label {
    color: var(--alkula-text);
}

select,
input,
textarea {
    background: var(--alkula-panel) !important;
    color: var(--alkula-text) !important;

    border: 1px solid var(--alkula-border) !important;
    border-radius: 6px;
}

select:focus,
input:focus,
textarea:focus {
    border-color: var(--alkula-green) !important;
    outline: none;
}

#content-input {
    min-height: 260px !important;
    resize: vertical;
}

#uploader_password[placeholder^="Incorrect"] {
    border-color: #d96c75 !important;
}

#submit-button {
    background: var(--alkula-green) !important;
    color: #07110c !important;

    border: 0 !important;

    font-weight: 700;
    cursor: pointer;
}

#submit-button:hover {
    filter: brightness(1.08);
}

#submit-button:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Code / paste display */

pre,
code {
    background: var(--alkula-panel);
}

pre {
    border: 1px solid var(--alkula-border);
}

/* Footer */

body > p:last-child,
.microbin-credit {
    color: var(--alkula-muted);
    font-size: 0.8rem;
}

body > p:last-child a,
.microbin-credit a {
    color: var(--alkula-blue);
}

body > p:last-child a:hover,
.microbin-credit a:hover {
    color: var(--alkula-green);
}

/* Custom guide */

.guide {
    max-width: 680px;
}

.guide h1 {
    margin-bottom: 0.4rem;
}

.guide-intro {
    color: var(--alkula-muted);
    margin-bottom: 2rem;
}

.guide section {
    margin-bottom: 1.8rem;
}

.guide h2 {
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
}

.guide p {
    margin-top: 0.3rem;
}

.guide strong {
    color: var(--alkula-text);
}