/* Roojai: a calm, friendly home for work and money. */
:root { --green:#7664b0!important; --mint:#eff8f4!important; --ink:#393345!important; --muted:#81798c!important; --card:#fffefd!important; --bg:#faf7f3!important; --peach:#ffe1d8!important; --lav:#ece6fa!important; }
body { background:linear-gradient(135deg,#faf7f3,#f6f2ff 55%,#eef8f3)!important; color:#393345!important; }
header { background:linear-gradient(120deg,#f0eafa,#fff5ec 60%,#e8f5ef)!important; border-bottom:1px solid #e9e2f0!important; box-shadow:0 5px 22px #7664b010!important; }
h1,h2 { color:#514372!important; letter-spacing:-.02em; }
button,.btn { background:#7664b0; }
button:hover { filter:brightness(.96); }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #c2b2ef; outline-offset:2px; }
.card { box-shadow:0 8px 26px #6a56800a!important; }
.hero { background:linear-gradient(125deg,#8873b8,#a792cf)!important; }
.hero h2 { color:white!important; }
.score:after { background:#9581c1!important; }
nav button { color:#6b5a80!important; background:#ffffffb8!important; }
nav button.active { background:#e9e0f8!important; color:#604790!important; box-shadow:inset 0 0 0 1px #dbceed!important; }
.outline { background:white!important; color:#75618d!important; border-color:#e4daef!important; }
.danger { background:#fff0f2!important; color:#b85366!important; }
.task-item { background:#f9f6ff; border-left-color:#b2a0dc; overflow-wrap:anywhere; }
.task-item.overdue { background:#fff0f1; }
.task-stat { background:#f4effb; }
.task-stat b { color:#7960a8; }
.task-reminder-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.task-reminder-row input[type=checkbox] { width:22px; min-height:22px; accent-color:#7664b0; }
.task-reminder-row label { flex:1; min-width:100px; font-size:13px; }
.task-reminder-row label input { margin-top:5px; }
.mascot { filter:none!important; border-radius:22px; }
@media(max-width:700px) { .task-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .section-title{gap:10px;flex-wrap:wrap} .task-item .actions button{min-height:44px} .task-reminder-row label{min-width:85px} }
@media(max-width:480px) { .top{flex-wrap:wrap!important;gap:8px!important} .top .month{width:100%!important;max-width:none!important;flex-basis:100%;box-sizing:border-box} .top .brand{min-width:0} .top .mascot{width:44px;height:44px} .top h1{font-size:19px} }