/* ChartIQ — my stats */
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.scard { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); display: grid; gap: 2px; align-content: start; }
.scard span { font-size: 12.5px; color: var(--text-3); } .scard b { font: 700 1.9rem/1.1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .scard small { font-size: 12.5px; color: var(--text-3); }
.scard .up { color: var(--up); } .scard .down { color: var(--down); }
.sec-h2 { font-size: 1.15rem; margin-block: 28px 12px; letter-spacing: -.01em; }
.panel2 { margin-block-start: 16px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); }
.panel2 .sec-h2 { margin-block-start: 0; }
.spark { inline-size: 100%; block-size: 130px; display: block; }
.spark__mid { stroke: var(--line-2); stroke-dasharray: 4 5; } .spark__line { fill: none; stroke: var(--brand-ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } .spark__dot { fill: var(--brand-ink); }
.trend { margin-block-start: 8px; font-weight: 600; font-size: 14px; } .trend.up { color: var(--up); } .trend.down { color: var(--down); }
.habits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.habit { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); border-inline-start: 4px solid var(--c, var(--unk)); background: var(--surface); box-shadow: var(--card-shadow); display: grid; gap: 6px; align-content: start; }
.habit--warn { --c: var(--warn); } .habit--good { --c: var(--ok); } .habit--info { --c: var(--brand); }
.habit__t { font: 600 11.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.habit b { font-size: 1.1rem; } .habit p { color: var(--text-2); font-size: 14.5px; } .habit .habit__tip { color: var(--text); font-weight: 500; padding-block-start: 6px; border-block-start: 1px dashed var(--line-2); margin-block-start: 4px; }
.recent { display: grid; gap: 8px; }
.recent__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.recent__row .gmini { margin: 0; inline-size: 34px; block-size: 34px; font-size: 16px; border-radius: 10px; font-style: normal; }
.recent__row div { display: grid; min-inline-size: 0; } .recent__row b { font-variant-numeric: tabular-nums; } .recent__row div span { color: var(--text-3); font-size: 12.5px; }
.recent__score { color: var(--text-2); font-size: 13px; }
.scard b { font-family: var(--f-display); font-weight: 800; }