/* Money insights and the customer money overview (in-) */
.in-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.in-period { display: flex; gap: 4px; flex-wrap: wrap; background: var(--panel-soft); padding: 4px; border-radius: 999px; border: 1px solid var(--line); }
.in-period button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.in-period button.on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.in-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.in-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-kpi { position: relative; padding: 16px 18px; border-radius: 14px; color: #fff; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 110px; }
.in-kpi small { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.in-kpi b { font-size: 26px; line-height: 1.15; }
.in-kpi span { font-size: 12.5px; opacity: .92; }
.in-kpi em { font-style: normal; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.22); }
.in-kpi > i { position: absolute; right: 14px; top: 14px; font-size: 22px; opacity: .55; }
.in-k-in { background: linear-gradient(135deg, #15803d, #22c55e); } .in-k-out { background: linear-gradient(135deg, #be123c, #f43f5e); }
.in-k-save { background: linear-gradient(135deg, #6d28d9, #a855f7); } .in-k-safe { background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }
.in-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.in-tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; white-space: nowrap; }
.in-tabs a.on { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.in-safe { display: flex; flex-direction: column; margin-bottom: 10px; } .in-safe b { font-size: 34px; color: var(--brand-primary); } .in-safe span { color: var(--muted); }
.in-calc { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 10px; font-size: 13.5px; }
.in-calc dt { color: var(--muted); } .in-calc dd { margin: 0; text-align: right; }
.in-calc.big { font-size: 15px; }
.pos { color: #15803d; } .neg { color: #b91c1c; }
.in-rows { list-style: none; margin: 0; padding: 0; }
.in-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.in-rows li:last-child { border-bottom: 0; }
.in-rows .ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.in-rows .tx { flex: 1; min-width: 0; } .in-rows .tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-rows .am { font-weight: 700; white-space: nowrap; }
.in-up { list-style: none; margin: 0; padding: 0; }
.in-up li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.in-up li:last-child { border-bottom: 0; }
.in-up .d { width: 42px; flex: none; text-align: center; font-size: 11px; text-transform: uppercase; color: var(--muted); line-height: 1.1; background: var(--panel-soft); border-radius: 8px; padding: 4px 0; }
.in-up .d b { display: block; font-size: 17px; color: var(--text); }
.in-up li > div { flex: 1; min-width: 0; } .in-up li > div b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-up .num { font-weight: 700; white-space: nowrap; }
.in-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: middle; }
.in-bar { height: 5px; background: var(--panel-soft); border-radius: 999px; margin-top: 6px; max-width: 260px; } .in-bar span { display: block; height: 100%; border-radius: 999px; }
.in-chg { font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 999px; } .in-chg.up { background: #dcfce7; color: #166534; } .in-chg.down { background: #fee2e2; color: #991b1b; }
.in-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.in-acc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.in-acc > b { font-size: 20px; }
.in-alerts { list-style: none; margin: 0; padding: 0; }
.in-alerts li { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.in-alerts li > i { font-size: 22px; color: #d97706; } .in-alerts li.st-not_me > i { color: #b91c1c; } .in-alerts li.st-recognised > i { color: #16a34a; }
.in-alerts li > div:not(.act) { flex: 1; } .in-alerts p { margin: 4px 0; }
.in-alerts .act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ct-btn.bad { color: #b91c1c; border-color: #fecaca; }
.in-cat { border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.in-cat i { color: var(--c); } .in-cat i.sm { font-size: 9px; color: var(--muted); }
.in-catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.in-catgrid label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; cursor: pointer; font-size: 13px; }
.in-catgrid input { position: absolute; opacity: 0; } .in-catgrid i { color: var(--c); }
.in-catgrid label:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); font-weight: 600; }
.in-catgrid label:has(input:focus-visible) { outline: 2px solid var(--brand-primary); }
/* The dashboard money overview */
.in-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; padding: 22px 24px; border-radius: 16px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #1e40af 0%, #0b2a5b 55%, #071a3a 100%); box-shadow: 0 10px 30px rgba(7,26,58,.25); }
.in-hero-main small { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; opacity: .8; }
.in-hero-main > b { display: block; font-size: 40px; line-height: 1.1; margin: 4px 0; }
.in-hero-main > span { opacity: .8; font-size: 13px; }
.in-hero-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.in-hero-figs > div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.in-hero-figs > div.hl { background: rgba(56,189,248,.18); border-color: rgba(125,211,252,.45); }
.in-hero-figs small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.in-hero-figs b { font-size: 18px; } .in-hero-figs em { font-style: normal; font-size: 11.5px; opacity: .8; } .in-hero-figs .pos { color: #86efac; }
.in-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.in-chip { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "cur nm" "cur am" "cur em"; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.1); }
.in-chip:hover { background: rgba(255,255,255,.14); }
.in-chip .cur { grid-area: cur; align-self: center; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.18); border-radius: 8px; padding: 6px 7px; }
.in-chip .nm { grid-area: nm; font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .in-chip b { grid-area: am; font-size: 15px; } .in-chip em { grid-area: em; font-style: normal; font-size: 11px; color: #fcd34d; }
.in-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.in-quick a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.95); color: #0b2a5b; text-decoration: none; font-size: 12px; font-weight: 600; text-align: center; }
.in-quick a i { font-size: 18px; color: #1d4ed8; }
.in-goals { display: flex; flex-direction: column; gap: 10px; }
.in-goal { display: block; text-decoration: none; color: var(--text); margin-bottom: 8px; }
.in-goal .hd { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; } .in-goal .hd i { color: var(--brand-primary); }
.in-cards { list-style: none; margin: 0; padding: 0; }
.in-cards li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.in-cards li > div { flex: 1; min-width: 0; } .in-cards li.frozen .mini { filter: grayscale(1); opacity: .6; }
.in-cards .mini { width: 44px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }
.in-cards .mini.d-graphite { background: linear-gradient(135deg, #334155, #64748b); } .in-cards .mini.d-silver { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.in-cards .mini.d-teal { background: linear-gradient(135deg, #0f766e, #14b8a6); } .in-cards .mini.d-purple { background: linear-gradient(135deg, #6d28d9, #a855f7); } .in-cards .mini.d-navy { background: linear-gradient(135deg, #0b2a5b, #1e40af); }
.in-toggle { width: 44px; height: 24px; border-radius: 999px; border: 0; padding: 2px; cursor: pointer; background: #16a34a; position: relative; transition: background .15s; }
.in-toggle span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translateX(20px); transition: transform .15s; }
.in-toggle.off { background: #94a3b8; } .in-toggle.off span { transform: translateX(0); }
.in-offers { list-style: none; margin: 0; padding: 0; }
.in-offers li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.in-offers li:last-child { border-bottom: 0; } .in-offers li > i { font-size: 20px; color: #d97706; } .in-offers li > div { flex: 1; min-width: 0; }
.in-offers li.k-alert > i { color: #b91c1c; } .in-offers li.k-offer > i { color: #7c3aed; } .in-offers li.k-goal > i { color: #16a34a; }
@media (max-width: 1100px) { .in-hero { grid-template-columns: 1fr; } .in-quick { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .in-kpis, .in-kpis.three { grid-template-columns: repeat(2, 1fr); } .in-hero-figs { grid-template-columns: repeat(2, 1fr); } .in-chips { grid-template-columns: 1fr; } .in-catgrid { grid-template-columns: repeat(2, 1fr); } .in-hero-main > b { font-size: 32px; } }
.in-rows .sub, .in-up .sub, .in-cards .sub, .in-offers .sub, .in-alerts .sub, .in-acc .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.in-offers li > div b, .in-cards li > div b { display: block; }