* { box-sizing: border-box; }

body {
    margin: 0;
    background: #10131c;
    color: white;
    font-family: Arial, sans-serif;
}

header {
    padding: 30px 20px;
    text-align: center;
    background: #191f2e;
}

header h1 { margin: 0; font-size: 36px; }
header p { color: #aab2c5; }

main {
    max-width: 850px;
    margin: 35px auto;
    padding: 0 20px;
}

.editor, .note {
    background: #191f2e;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 20px;
}

input, textarea {
    width: 100%;
    background: #252d40;
    color: white;
    border: 1px solid #39445d;
    border-radius: 9px;
    padding: 13px;
    font: inherit;
    margin-bottom: 12px;
}

textarea { min-height: 170px; resize: vertical; }

button {
    background: #3478f6;
    color: white;
    border: none;
    border-radius: 9px;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 15px;
}

button:hover { background: #2462d4; }
.note h3 { margin-top: 0; }
.note p { color: #c1c9d9; white-space: pre-wrap; }
.deleteButton { background: #a83245; margin-top: 8px; }
#status { color: #70d99b; }