@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --paper: #fdfdf6;
    --line: #b9d4f0;
    --margin: #e2a9a9;
    --ink: #2c3440;
    --ink-faded: #8b93a3;
    --accent: #3a6ea5;
    --done-bg: #eef1e6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: #dfe6ee;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
    display: flex;
    justify-content: center;
    padding: 32px 16px;
}

.wrap {
    width: 100%;
    max-width: 640px;
    background:
        repeating-linear-gradient(
            to bottom,
            var(--paper) 0px,
            var(--paper) 35px,
            var(--line) 36px,
            var(--paper) 37px
        );
    border-left: 3px solid var(--margin);
    box-shadow: 0 12px 30px rgba(20, 30, 50, 0.18);
    padding: 28px 24px 40px 40px;
    position: relative;
}

.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

h1 {
    font-family: 'Kalam', cursive;
    font-size: 2rem;
    margin: 0;
    color: var(--accent);
    transform: rotate(-1deg);
}

.logout {
    font-size: 0.8rem;
    color: var(--ink-faded);
    text-decoration: none;
    border-bottom: 1px dashed var(--ink-faded);
}
.logout:hover { color: var(--accent); border-color: var(--accent); }

.add-form {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.add-form input[type="text"] {
    flex: 1;
    border: none;
    border-bottom: 2px solid var(--line);
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    padding: 6px 4px;
    color: var(--ink);
}
.add-form input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

.add-form button {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.add-form button:hover { background: #2d557f; }
.add-form button:focus-visible,
.logout:focus-visible,
.toggle:focus-visible,
.delete:focus-visible,
input:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.task-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    line-height: 26px;
}

.task label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.task .text {
    word-break: break-word;
}

.task.done .text {
    color: var(--ink-faded);
    text-decoration: line-through wavy var(--margin);
}

.toggle {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.delete {
    background: none;
    border: none;
    color: var(--ink-faded);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}
.delete:hover { color: #b23b3b; }

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: var(--paper);
    border-left: 3px solid var(--margin);
    box-shadow: 0 12px 30px rgba(20, 30, 50, 0.18);
    padding: 32px 32px 40px;
    width: 100%;
    max-width: 340px;
}

.login-box h1 {
    margin-top: 0;
}

.login-box form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-box label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--ink-faded);
}

.login-box input {
    font-family: inherit;
    font-size: 1rem;
    padding: 8px 6px;
    border: none;
    border-bottom: 2px solid var(--line);
    background: transparent;
    color: var(--ink);
}
.login-box input:focus { outline: none; border-color: var(--accent); }

.login-box button {
    margin-top: 8px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}
.login-box button:hover { background: #2d557f; }

.error {
    color: #b23b3b;
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .wrap { padding: 22px 14px 32px 28px; }
    h1 { font-size: 1.6rem; }
}