body {
    font-family: Arial;
    background:#F6F2E8;
    color:#3C342D;
    margin:0;
    font-size:16px;
}

/* TOP BAR */
.topbar {
    background:#6B4F3A;
    color:white;
    padding:14px;
    font-size:18px;
}

.topbar span {
    display:block;
    font-size:12px;
    opacity:0.8;
}

/* NAV (MOBILE FRIENDLY) */
.nav {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:10px;
    background:#FFFCF7;
    border-bottom:1px solid #DCCFBE;
}

.nav a {
    background:#9A6A4A;
    color:white;
    padding:10px 12px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
}

/* MAIN WRAP */
.wrap {
    padding:12px;
}

/* CARDS (BIG TOUCH TARGETS) */
.card {
    background:#FFFCF7;
    padding:14px;
    margin:10px 0;
    border-radius:14px;
    border:1px solid #DCCFBE;
    font-size:16px;
}

/* BUTTONS */
button {
    padding:12px;
    width:100%;
    border:none;
    border-radius:10px;
    background:#9A6A4A;
    color:white;
    font-size:16px;
}

/* INPUTS */
input, textarea {
    width:100%;
    padding:12px;
    margin:6px 0;
    border-radius:10px;
    border:1px solid #DCCFBE;
    font-size:16px;
}

/* GRID TOUCH IMPROVED */
.grid {
    display:grid;
    gap:6px;
    margin-top:12px;
}

.cell {
    width:44px;
    height:44px;
    background:#FFFCF7;
    border:1px solid #DCCFBE;
    border-radius:8px;
}

.cell.filled {
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:18px;
}

/* CRUMBS */
.crumb {
    font-size:14px;
    opacity:0.7;
    margin:8px 0;
}

/* LOGIN */
.login-body {
    background:#F6F2E8;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    margin:0;
}

.login-card {
    background:#FFFCF7;
    padding:24px;
    border-radius:16px;
    width:90%;
    max-width:320px;
    text-align:center;
    border:1px solid #DCCFBE;
}