/* Minimal Groww-like system — no external dependencies */
:root{
  --bg:#f3f5f7;            /* page */
  --card:#ffffff;          /* surfaces */
  --fg:#0b1320;            /* main text */
  --muted:#6b7280;         /* secondary text */
  --border:#e5e7eb;        /* hairlines */
  --primary:#00b386;       /* Groww teal */
  --primary-dark:#009a72;
  --shadow:0 6px 16px rgba(16,24,40,.06);
  --radius:12px;
}
*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
html,body{margin:0;background:var(--bg);color:var(--fg);line-height:1.6}

/* Header */
.g-header{
  position:sticky;top:0;z-index:20;
  background:var(--card);box-shadow:0 1px 6px rgba(16,24,40,.05);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
}
.g-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.g-logo{display:inline-flex;width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;align-items:center;justify-content:center;font-weight:800}
.g-actions{display:flex;gap:10px}

/* Layout */
.g-container{max-width:1100px;margin:0 auto;padding:22px}
.g-title{font-size:32px;line-height:1.2;margin:8px 0 6px}
.g-subtitle{color:var(--muted);margin:0 0 18px}

/* Buttons */
.g-btn{appearance:none;border:1px solid transparent;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:.2s}
.g-btn--primary{background:var(--primary);color:#fff}
.g-btn--primary:hover{background:var(--primary-dark)}
.g-btn--ghost{background:#fff;border-color:var(--border);color:var(--fg)}
.g-btn--ghost:hover{background:#f8fafc}

/* Cards & form */
.g-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.g-form .g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.g-field label{font-weight:600;font-size:14px;margin:0 0 6px;display:block}
.g-field input{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:#fff;font-size:14px;outline:none;transition:border-color .2s, box-shadow .2s;
}
.g-field input:focus{border-color:#b5e8d7;box-shadow:0 0 0 4px rgba(0,179,134,.12)}
.g-form-actions{margin-top:16px;display:flex;gap:10px;justify-content:flex-end}

/* Results */
.g-results{margin-top:24px}
.g-section-title{font-size:20px;font-weight:700;margin:0 0 12px}
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.g-card-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.g-card h3{margin:0;font-size:18px}
.g-amount{font-size:24px;font-weight:800}
.g-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:6px 0}
.g-row:last-child{border-bottom:0}
.g-muted{color:var(--muted);font-size:13px}
.g-recommend{margin-top:18px;background:#e8f8f3;border-left:4px solid var(--primary);padding:14px 16px;border-radius:10px;font-weight:600}

/* Slab table */
.g-table{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:8px}
.g-tr{display:grid;grid-template-columns:1.2fr .8fr .5fr .9fr;gap:8px;padding:9px 12px;border-top:1px solid var(--border);background:#fff}
.g-tr:first-child{border-top:0}
.g-th{background:#f7f9fb;font-weight:700}
.g-right{text-align:right}

/* Utilities */
.g-hidden{display:none}

/* Responsive header */
@media (max-width:640px){
  .g-header{flex-direction:column;align-items:flex-start;gap:10px}
  .g-actions{flex-wrap:wrap}
}