:root {
    --bg: #0f1724;
    --card: #111827;
    --muted: #9ca3af;
    --accent: #06b6d4;
    --accent-2: #7c3aed;
    --glass: rgba(255, 255, 255, 0.03);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    background: linear-gradient(180deg, #071129 0%, #071428 60%);
    color: #e6eef8
}

.wrap {
    max-width: 1100px;
    margin: 28px auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px
}

header {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

header h1 {
    font-size: 20px;
    margin: 0;
    letter-spacing: 0.4px
}

header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}

.card {
    background: linear-gradient(180deg, var(--card), #0b1220);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6)
}

/* Pomodoro */
.pomodoro {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.timer {
    display: flex;
    align-items: center;
    gap: 16px
}

.clock {
    width: 170px;
    height: 170px;
    border-radius: 18px;
    background: var(--glass);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.time {
    font-size: 36px;
    font-weight: 700
}

.mode {
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--muted);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer
}

button.primary {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border: 0;
    color: #042028
}

.small {
    padding: 6px 8px;
    font-size: 13px
}

.settings {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

label {
    font-size: 13px;
    color: var(--muted)
}

select,
input[type=number] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #eaf6fb;
    padding: 6px 8px;
    border-radius: 6px
}

progress {
    width: 100%;
    height: 10px;
    border-radius: 8px;
    overflow: hidden
}

/* Right column */
.stack {
    display: flex;
    flex-direction: column;
    gap: 16px
}

/* To-do */
.todo-input {
    display: flex;
    gap: 8px
}

.todo-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
    padding-right: 6px
}

.todo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent);
    padding: 10px;
    border-radius: 8px
}

.todo-left {
    display: flex;
    align-items: center;
    gap: 10px
}

.todo-left input[type=checkbox] {
    width: 18px;
    height: 18px
}

.todo-text {
    max-width: 280px
}

.todo-text.completed {
    text-decoration: line-through;
    color: var(--muted)
}

.trash {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer
}

/* Water */
.water {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.water .bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden
}

.water .progress {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    width: 0%
}

footer {
    grid-column: 1/-1;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    text-align: center
}

@media(max-width:980px) {
    .wrap {
        grid-template-columns: 1fr;
        padding: 16px
    }

    .clock {
        width: 140px;
        height: 140px
    }
}