:root{ --bg:#f6f0e6; --card:#fbf7ef; --border:#d8cdbc; --text:#2e2b26; --subtext:#6b6257; --accent:#38a169; --shadow: 0 10px 30px rgba(0,0,0,0.03); }
body{ margin:0; font-family:"optima","Georgia",serif; background:var(--bg); color:var(--text); }
.layout{ max-width:1100px; margin:0 auto; padding:20px; display:flex; gap:16px; align-items:flex-start; }
.sidebar{ width:360px; background:var(--card); border:1px solid var(--border); border-radius:28px; padding:18px; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow:auto; }
.main{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:28px; padding:22px; }
.brand h1{ font-size:26px; margin:6px 0 0; font-weight:400; text-align:center; }
.subtitle{ color:var(--subtext); font-size:13px; text-align:center; font-style:italic; margin-bottom:20px; }
.h2{ font-size:12px; text-transform:uppercase; letter-spacing:2px; color:var(--border); margin:16px 0; display:flex; align-items:center; gap:10px; justify-content:center; }
.h2::before, .h2::after { content:""; height:1px; width:20px; background:var(--border); }
.controls{ display:flex; flex-direction:column; gap:8px; }
.input, .select, .btn{ width:100%; border:1px solid var(--border); background:white; border-radius:18px; padding:10px; font-family:inherit; }
.btn.primary{ background:var(--accent); color:white; border:none; cursor:pointer; font-weight:600; }
.group{ background:white; border:1px solid var(--border); border-radius:18px; padding:10px; margin-bottom:10px; }
.group-title{ font-size:11px; text-transform:uppercase; color:var(--subtext); margin-bottom:8px; }
.filter-item{ display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.card{ background:white; border:1px solid var(--border); border-radius:18px; padding:15px; }
.rate{ font-size:24px; font-weight:800; color:var(--accent); margin:5px 0; }
.lender{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:bold; color:var(--subtext); }
.lender img { width:20px; border-radius:4px; }
.tag{ display:inline-block; background:var(--bg); font-size:10px; padding:2px 8px; border-radius:10px; margin:2px; }
.disclaimer{ font-size:11px; color:var(--subtext); margin-top:20px; line-height:1.4; }
@media (max-width: 900px){ .layout{ flex-direction:column; } .sidebar{ width:100%; position:static; } }