:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --text:#222;
  --danger:#c82333;
  --warning:#f39c12;
  --success:#28a745;
}
*{
    box-sizing:border-box
}
body{
    font-family:Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:32px
}

main{
    max-width:480px;
    margin:0 auto;background:var(--card);
    padding:24px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.06)
}
h1{
    margin-top:0;
    color: red;
}
.balance{
    display:flex;
    align-items:center;
    gap:12px;margin-bottom:16px
}
.balance .amount{
    font-weight:700;
    font-size:1.4rem;

}
.transfer{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:12px
}

input[type="text"]{
    flex:1;
    padding:8px;
    border:1px solid #d7d7df;
    border-radius:4px
}
button{
    padding:8px 12px;
    border:none;
    background:red;
    color:white;border-radius:4px;
    cursor:pointer
}
button:active{
    transform:translateY(1px)
}

#message{
    min-height:1.6em
}

.msg-error{
    color:var(--danger)
}

.msg-warning{
    color:var(--warning)
}

.msg-success{
    color:var(--success)
}

.negative{
    color:var(--danger)
}