:root{--brand:#1a73e8;--brand-dark:#1765cc;--sidebar-bg:#ffffff;--bg:#f1f5f9;--card:#ffffff;--text:#0f172a;--muted:#64748b;--ring:#e2e8f0}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--brand)}button{cursor:pointer;font:inherit}
section{animation:fadeUp .3s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
form{display:grid;gap:.75rem}label{display:grid;gap:.35rem;font-size:.875rem;font-weight:500;color:#334155}
input,select{width:100%;border:1px solid #cbd5e1;border-radius:.6rem;padding:.55rem .75rem;background:#fff;font-size:.9rem;min-height:44px}
input[type="color"]{padding:.2rem;height:44px}input[type="file"]{padding:.4rem}
input:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
input[type="checkbox"]{width:auto;min-height:auto}
main ul{display:grid;gap:.5rem;padding-left:0;list-style:none}main ul li{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:.65rem .85rem;font-size:.9rem;color:#334155}
main ul li button{background:#eef2ff;color:#4338ca;border:0;border-radius:.5rem;padding:.25rem .6rem;font-size:.8rem;font-weight:600;margin-left:.4rem}
main h3{font-weight:700;color:#0f172a}
nav button{text-align:left;border:0;border-radius:9999px;padding:.6rem .85rem;color:#5f6368}
nav button:hover{background:#f1f3f4;color:#202124}
nav button.active{background:#e8f0fe;color:var(--brand);font-weight:600}
.brand-mark{width:2.5rem;height:2.5rem;border-radius:.75rem;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.125rem;color:#fff;flex-shrink:0}
.brand-mark-sm{width:2.25rem;height:2.25rem;border-radius:.75rem;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0}
.brand-logo{width:2.5rem;height:2.5rem;border-radius:.75rem;object-fit:cover;flex-shrink:0}
.brand-logo-sm{width:2.25rem;height:2.25rem;border-radius:.75rem;object-fit:cover;flex-shrink:0}
.brand-logo-lg{width:6rem;height:6rem;border-radius:1rem;object-fit:cover}
.auth-links{font-size:.875rem;color:#64748b}.auth-links a{font-weight:600}
.branding-box{display:grid;gap:.75rem;border:1px solid #e2e8f0;border-radius:1rem;padding:1rem;background:#f8fafc}
/* Sidebar uses the user-chosen colour, buttons use the user-chosen brand colour */
#app-sidebar{background:var(--sidebar-bg) !important}
.bg-indigo-600,.bg-indigo-700{background-color:var(--brand) !important}
.text-indigo-600,.text-indigo-400{color:var(--brand) !important}

main.space-y-6>*+*{margin-top:1.5rem}section.space-y-6>*+*{margin-top:1.5rem}section.space-y-8>*+*{margin-top:2rem}.space-y-2>*+*{margin-top:.5rem}
.backdrop-blur{backdrop-filter:blur(8px)}
.bg-emerald-100{background-color:#d1fae5}
.bg-emerald-500{background-color:#10b981}
.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-from), var(--tw-via, var(--tw-to)), var(--tw-to))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-from), var(--tw-to))}
.bg-indigo-100{background-color:#e0e7ff}
.bg-indigo-50{background-color:#eef2ff}
.bg-indigo-600{background-color:#4f46e5}
.bg-rose-500{background-color:#f43f5e}
.bg-slate-100{background-color:#f1f5f9}
.bg-slate-800{background-color:#1e293b}
.bg-slate-900{background-color:#0f172a}
.bg-white{background-color:#ffffff}
.bg-white\/80{background-color:rgba(255,255,255,0.8)}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-emerald-100{border-color:#d1fae5}
.border-rose-100{border-color:#ffe4e6}
.border-slate-200{border-color:#e2e8f0}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.from-indigo-600{--tw-from:#4f46e5}
.from-slate-900{--tw-from:#0f172a}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.grid{display:grid}
.h-2{height:0.5rem}
.hidden{display:none}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.625}
.leading-tight{line-height:1.25}
.list-decimal{list-style-type:decimal}
.max-w-2xl{max-width:42rem}
.max-w-6xl{max-width:72rem}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-auto{margin-top:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pl-5{padding-left:1.25rem}
.px-2.5{padding-left:0.625rem;padding-right:0.625rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-2.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.ring-1{box-shadow:0 0 0 1px var(--tw-ring-color, #e2e8f0)}
.ring-slate-200{--tw-ring-color:#e2e8f0}
.ring-slate-300{--tw-ring-color:#cbd5e1}
.ring-slate-800{--tw-ring-color:#1e293b}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.rounded-xl{border-radius:0.75rem}
.shadow-lg{box-shadow:0 10px 15px rgba(15,23,42,0.1)}
.shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,0.05)}
.shadow-xl{box-shadow:0 20px 25px rgba(15,23,42,0.1)}
.shrink-0{flex-shrink:0}
.sticky{position:sticky}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.text-\[11px\]{font-size:11px}
.text-emerald-600{color:#059669}
.text-emerald-700{color:#047857}
.text-indigo-200{color:#c7d2fe}
.text-indigo-400{color:#818cf8}
.text-indigo-600{color:#4f46e5}
.text-indigo-700{color:#4338ca}
.text-lg{font-size:1.125rem}
.text-rose-600{color:#e11d48}
.text-slate-200{color:#e2e8f0}
.text-slate-300{color:#cbd5e1}
.text-slate-400{color:#94a3b8}
.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}
.text-slate-700{color:#334155}
.text-slate-900{color:#0f172a}
.text-sm{font-size:0.875rem}
.text-white{color:#ffffff}
.text-xl{font-size:1.25rem}
.text-xs{font-size:0.75rem}
.to-indigo-950{--tw-to:#1e1b4b}
.to-violet-600{--tw-to:#7c3aed}
.top-0{top:0}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.tracking-widest{letter-spacing:0.1em}
.transition{transition:all .15s ease}
.uppercase{text-transform:uppercase}
.via-slate-900{--tw-via:#0f172a}
.w-64{width:16rem}
.w-full{width:100%}
.z-10{z-index:10}
.hover\:bg-indigo-700:hover{background-color:#4338ca}
.hover\:bg-slate-50:hover{background-color:#f8fafc}
.hover\:bg-slate-700:hover{background-color:#334155}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,0.05)}
.hover\:text-indigo-800:hover{color:#3730a3}
.hover\:text-white:hover{color:#ffffff}
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color, #6366f1)}
.focus\:ring-indigo-500:focus{--tw-ring-color:#6366f1}
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (min-width:768px){.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}.md\:hidden{display:none}.md\:p-12{padding:3rem}.md\:p-8{padding:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:text-5xl{font-size:3rem}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}}

@media (max-width:767px){
  #app-sidebar{display:none !important}
  main{padding:1rem !important}
  .grid{grid-template-columns:1fr !important}
  h1{font-size:1.75rem !important}
  h2{font-size:1.25rem !important}
}
@media (min-width:768px) and (max-width:1023px){
  #app-sidebar{width:14rem !important}
  main{padding:1.5rem !important}
}

.bg-red-600{background-color:#dc2626}.bg-red-700{background-color:#b91c1c}.hover\:bg-red-700:hover{background-color:#b91c1c}.inline-block{display:inline-block}.\!p-4{padding:1rem !important}.tab{display:block}

[hidden]{display:none !important}

#app-sidebar{border-right:1px solid #dadce0;color:#202124}
#app-sidebar .text-slate-400{color:#5f6368 !important}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-size:20px;vertical-align:middle}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem}
.icon-pick{border:1px solid #dadce0;border-radius:.75rem;padding:.6rem .25rem;text-align:center;cursor:pointer;background:#fff}
.icon-pick:hover{border-color:var(--brand);background:#f8f9fa}
.icon-pick.selected{border-color:var(--brand);background:#e8f0fe;color:var(--brand)}
.icon-pick span{font-size:11px;display:block;margin-top:.25rem;color:#5f6368;overflow:hidden;text-overflow:ellipsis}
.cat-icon{width:2.25rem;height:2.25rem;border-radius:9999px;background:#e8f0fe;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.75rem}
.cat-row{display:flex;align-items:center}

.dash-stat{display:flex;gap:1rem;align-items:flex-start}
.dash-stat-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-stat-icon.blue{background:#e8f0fe;color:#1a73e8}
.dash-stat-icon.green{background:#e6f4ea;color:#188038}
.dash-stat-icon.red{background:#fce8e6;color:#d93025}
.dash-stat-icon.amber{background:#fef7e0;color:#b06000}
.dash-card h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem}
.dash-card h3 .material-symbols-outlined{color:#5f6368}
.progress{height:.5rem;background:#f1f3f4;border-radius:9999px;overflow:hidden;margin-top:.4rem}
.progress>div{height:100%;background:var(--brand);border-radius:9999px}
.progress.over>div{background:#d93025}
.quick-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.quick-actions a{border:1px solid #dadce0;border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;font-weight:600;color:#202124;text-decoration:none;background:#fff}
.quick-actions a:hover{background:#f8f9fa}
.tx-amount{font-weight:700;margin-left:auto}
.tx-income{color:#188038}.tx-expense{color:#d93025}
@media (max-width:767px){.dash-stat{padding:1rem !important}}

.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem}
.cal-head{font-size:.75rem;font-weight:700;color:#5f6368;text-align:center;padding:.25rem}
.cal-day{border:1px solid #e8eaed;border-radius:.5rem;padding:.5rem .25rem;background:#fff;min-height:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem}
.cal-day.other{opacity:.4}
.cal-day.selected{border-color:var(--brand);background:#e8f0fe;color:var(--brand);font-weight:700}
.cal-day.has-note{border-color:#1a73e8}
.cal-dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--brand)}
textarea{width:100%;border:1px solid #cbd5e1;border-radius:.6rem;padding:.55rem .75rem;font:inherit}