:root {
  --bg: #eef4f9;
  --surface: #fbfdff;
  --ink: #142433;
  --muted: #5d6f80;
  --line: #d3e0ea;
  --brand: #1d5a8c;
  --brand-dark: #164a75;
  --brand-soft: #dde9f3;
  --water: #2f6f9f;
  --water-fill: #bcdcf2;
  --water-fill-top: #9ccbec;
  --water-over: #5d9fd0;
  --water-soft: #dcebf5;
  --rain: #6f9fc4;
  --warn: #b5541c;
  --warn-soft: #f7e3d4;
  --ok: #2f7a3a;
  --z-parched: #f6dccb;
  --z-dry: #fbeee1;
  --z-sweet: #e0f0dc;
  --z-wet: #deebf7;
  --z-soaking: #c8dcf0;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 36, 51, .06), 0 2px 8px rgba(20, 36, 51, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1620;
    --surface: #16212d;
    --ink: #e4edf5;
    --muted: #93a6b8;
    --line: #283746;
    --brand: #7fb6e6;
    --brand-dark: #13324d;
    --brand-soft: #1e3044;
    --water: #8fc0e6;
    --water-fill: #1d3a52;
    --water-fill-top: #2a5577;
    --water-over: #3f7fb3;
    --water-soft: #1f3040;
    --rain: #5f8db0;
    --warn: #f0a070;
    --warn-soft: #3e2a1d;
    --ok: #9cd18f;
    --z-parched: #43291b;
    --z-dry: #332820;
    --z-sweet: #1c3424;
    --z-wet: #1a2e42;
    --z-soaking: #214263;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.1rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; }
h3 { font-size: 1.2rem; }
a { color: var(--water); }
button, input, select, textarea { font: inherit; color: inherit; }

/* Header */
.top {
  flex: none;
  background: var(--brand); color: #f2f7fc;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  text-align: center;
}
@media (prefers-color-scheme: dark) { .top { background: var(--brand-dark); } }
.weather-note { font-size: .75rem; opacity: .85; margin: 6px 0 0; }

/* Main area */
main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.view { padding: 0 16px 20px; max-width: 680px; margin: 0 auto; }
.view[hidden] { display: none !important; }
.view-garden { height: 100%; display: flex; flex-direction: column; padding-bottom: 10px; }
.grid-hint { margin: 8px 0 6px; font-size: .75rem; color: var(--muted); text-align: center; }

/* Garden grid: every plant on one screen */
.garden {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max(96px, calc((100% - 24px) / 4));
  align-content: start;
  gap: 8px;
}
@media (min-width: 560px) { .garden { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 0; cursor: pointer; text-align: left;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.tile:active { transform: scale(.97); }
.tile:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

.tile .water {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, var(--water-fill-top) 0, var(--water-fill) 10px);
  transition: height .6s cubic-bezier(.2,.8,.2,1);
}
.tile .water::before {
  /* gentle wave on the surface */
  content: ""; position: absolute; left: -10%; right: -10%; top: -5px; height: 10px;
  background: radial-gradient(10px 6px at 10px 6px, var(--water-fill-top) 98%, transparent) 0 0 / 20px 10px repeat-x;
}
.tile .over {
  position: absolute; left: 0; right: 0; top: 0;
  background: repeating-linear-gradient(135deg, var(--water-over) 0 6px, transparent 6px 12px), var(--water-fill-top);
  opacity: .85; transition: height .6s ease;
}
.tile.wet, .tile.soaking { border-color: var(--water-over); }
.tile.parched { border-color: var(--warn); }

.tile .art {
  position: absolute; left: 50%; bottom: 18%;
  width: 62%; max-width: 92px; aspect-ratio: 1; transform: translateX(-50%);
  pointer-events: none;
}
.tile .art svg { width: 100%; height: 100%; display: block; }
.tile .name {
  position: absolute; top: 6px; left: 8px; right: 8px;
  font-size: .78rem; font-weight: 650; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .meta {
  position: absolute; left: 8px; right: 8px; bottom: 5px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px;
  font-size: .7rem; color: var(--muted);
}
.tile .pct { font-weight: 700; font-size: .85rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile.parched .state, .tile.dry .state { color: var(--warn); font-weight: 600; }
.tile.wet .state, .tile.soaking .state { color: var(--water); font-weight: 600; }
.tile.sweet .state { color: var(--ok); font-weight: 600; }
.tile.planned { background: transparent; border-style: dashed; box-shadow: none; }
.tile.planned .art { opacity: .35; filter: grayscale(.8); }
.tile.planned .name { color: var(--muted); font-weight: 600; }
.tile.add {
  background: transparent; border: 1.5px dashed var(--brand); box-shadow: none; color: var(--brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
}
.tile.add .plus-icon { font-size: 2rem; line-height: 1; font-weight: 300; }
.tile.add .add-label { font-size: .8rem; font-weight: 600; }

.tile .plus {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, 0);
  font-weight: 700; font-size: .95rem; color: var(--water); pointer-events: none;
  animation: floatUp .9s ease-out forwards;
}
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -28px); } }

/* Sections / cards */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 10px; gap: 8px; }
.hint { color: var(--muted); font-size: .86rem; margin: 0 0 10px; }
.hint-inline { color: var(--muted); font-size: .78rem; }
.hint.small { font-size: .78rem; margin-top: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }

/* Rain chart (log tab) */
.rainbars { display: flex; gap: 8px; align-items: stretch; }
.rb-group { display: flex; flex-direction: column; border-radius: 10px; padding: 4px 4px 2px; }
.rb-past { flex: 14; }
.rb-fut {
  flex: 4.6;
  background: repeating-linear-gradient(135deg, var(--water-soft) 0 5px, transparent 5px 10px);
  border: 1.5px dashed var(--rain);
}
.rb-cap { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.rb-fut .rb-cap { color: var(--water); }
.rb-cols { display: grid; gap: 3px; align-items: end; height: 82px; }
.rainbars .bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.rainbars .fill { width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--rain); }
.rainbars .bar.forecast .fill { background: var(--surface); border: 1.5px dashed var(--water); }
.rainbars .bar.today .fill { background: var(--water); }
.rainbars .val { font-size: .58rem; color: var(--muted); height: 12px; }
.rainbars .lbl { font-size: .58rem; color: var(--muted); margin-top: 3px; height: 12px; white-space: nowrap; }

/* Buttons */
.btn {
  appearance: none; border: 0; border-radius: 12px;
  background: var(--water); color: #fff; font-weight: 600;
  padding: 12px 16px; min-height: 46px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
@media (prefers-color-scheme: dark) { .btn { color: #0f1a24; } }
.btn.secondary { background: var(--brand-soft); color: var(--ink); }
.btn.danger { background: transparent; color: var(--warn); border: 1px solid var(--warn-soft); }
.btn:active { transform: translateY(1px); }
.ghost-btn { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .85rem; color: var(--water); cursor: pointer; }
.btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
.btn-row .btn.danger { flex: 0 0 auto; margin-right: auto; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Log */
.log-list { list-style: none; margin: 0; padding: 0; }
.log-day { margin: 14px 0 6px; font-size: .76rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.log-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; }
.log-item .icon { width: 24px; text-align: center; }
.log-item .txt { flex: 1; min-width: 0; }
.log-item .txt small { display: block; color: var(--muted); }
.log-item.rain { background: var(--water-soft); border-color: transparent; }
.del { background: none; border: 0; color: var(--muted); font-size: 1.3rem; padding: 4px 8px; cursor: pointer; }
.empty { text-align: center; color: var(--muted); padding: 20px 0; }

/* Setup */
.edit-list { display: flex; flex-direction: column; gap: 8px; }
.edit-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.edit-row .thumb { width: 38px; height: 38px; flex: none; }
.edit-row .thumb svg { width: 100%; height: 100%; }
.edit-row .lbl { flex: 1; min-width: 0; }
.edit-row small { color: var(--muted); display: block; }
.search-row { display: flex; gap: 8px; margin-top: 12px; }
.search-row input { flex: 1; min-width: 0; }
.search-results { list-style: none; padding: 0; margin: 8px 0 0; }
.search-results button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 2px; cursor: pointer; }
#geoBtn { width: 100%; }

/* Forms */
input[type=text], input[type=email], input[type=search], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 16px; min-height: 44px;
}
.field { display: block; font-size: .85rem; color: var(--muted); margin-top: 12px; }
.field input, .field select, .field textarea { margin-top: 4px; color: var(--ink); }
.optional { opacity: .7; }
.kind-picker { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kind-picker::-webkit-scrollbar { display: none; }
.kind-picker { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 74px; }
.kind-picker button { width: 74px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 4px 2px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kind-picker button span { font-size: .6rem; line-height: 1.1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kind-picker button svg { width: 44px; height: 44px; display: block; }
.kind-picker button[aria-pressed=true] { border-color: var(--water); background: var(--water-soft); }

/* Sheets */
.sheet {
  border: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  width: 100%; max-width: 520px; max-height: 92dvh; margin: auto auto 0;
  border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink);
}
@media (min-width: 600px) { .sheet { margin: auto; border-radius: 20px; } }
.sheet::backdrop { background: rgba(10, 15, 8, .45); }
.detail-head { display: flex; gap: 14px; align-items: center; }
.detail-art { width: 84px; height: 84px; flex: none; border-radius: 14px; background: var(--water-soft); position: relative; overflow: hidden; }
.detail-art svg { position: relative; width: 100%; height: 100%; }
.detail-level { font-size: 1.6rem; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.mini-log { list-style: none; padding: 0; margin: 14px 0 0; font-size: .88rem; }
.mini-log li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mini-log li span:last-child { color: var(--muted); }
.earlier { margin-top: 12px; font-size: .88rem; }
.earlier summary { color: var(--water); cursor: pointer; }

/* Tabs */
.tabs {
  flex: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button { background: none; border: 0; padding: 12px 0 14px; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; }
.tabs button.active { color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }

.toast {
  position: fixed; left: 50%; bottom: calc(68px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--bg); padding: 9px 10px 9px 16px; border-radius: 999px; font-size: .88rem;
  max-width: calc(100% - 32px); z-index: 20; white-space: nowrap;
}
.toast[hidden] { display: none; }
.toast button { background: none; border: 0; color: #9fd0f5; font-weight: 700; padding: 2px 8px; cursor: pointer; }
@media (prefers-color-scheme: dark) { .toast button { color: #2f6f9f; } }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--water); outline-offset: 0; border-color: transparent; }

/* Water-level chart */
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.chart-head h4 { margin: 0; font-size: .95rem; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.seg button { background: none; border: 0; border-radius: 999px; padding: 4px 11px; font-size: .8rem; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.chart { position: relative; margin-top: 8px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.chart .z-parched { fill: var(--z-parched); } .chart .z-dry { fill: var(--z-dry); } .chart .z-sweet { fill: var(--z-sweet); }
.chart .z-wet { fill: var(--z-wet); } .chart .z-soaking { fill: var(--z-soaking); }
.chart .zlabel { font-size: 9.5px; fill: var(--muted); font-weight: 600; }
.chart .tick { font-size: 9px; fill: var(--muted); }
.chart .now-l { text-anchor: middle; }
.chart .lvl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .lvl.fut { stroke-dasharray: 4 4; opacity: .55; }
.chart .now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .wdot { fill: var(--water); stroke: var(--surface); stroke-width: 2; }
.chart .rainbar { fill: var(--rain); }
.chart .rainbar.fut { fill: none; stroke: var(--rain); stroke-width: 1; stroke-dasharray: 2 2; }
.chart .cross { stroke: var(--ink); stroke-width: 1; opacity: .4; }
.chart .focus { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--ink); color: var(--bg); border-radius: 8px; padding: 6px 9px; font-size: .75rem; line-height: 1.3;
  display: flex; flex-direction: column; white-space: nowrap;
}
.chart .tip[hidden] { display: none; }
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .72rem; color: var(--muted); margin: 6px 0 0; }
.chart-key .k { display: inline-block; vertical-align: middle; }
.chart-key .k:not(:first-child) { margin-left: 6px; }
.k-line { width: 14px; height: 2px; background: var(--ink); }
.k-dash { width: 14px; height: 0; border-top: 2px dashed var(--ink); opacity: .55; }
.k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--water); }
.k-rain { width: 6px; height: 10px; border-radius: 1.5px; background: var(--rain); }

/* Rain confirmation */
.rain-ask {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--water-soft); border-radius: 12px; padding: 9px 10px 9px 12px; margin-bottom: 8px; font-size: .82rem;
}
.rain-ask[hidden] { display: none; }
.rain-ask .ask-txt { display: flex; flex-direction: column; min-width: 0; }
.rain-ask .ask-txt span { color: var(--muted); font-size: .75rem; }
.rain-seg { flex: none; background: var(--surface); }
.rain-seg button { padding: 5px 10px; }
.rain-seg button[aria-pressed=true] { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .rain-seg button[aria-pressed=true] { color: #0e1620; } }
.log-item.rain.no .txt { opacity: .6; }
.log-item.rain.unreviewed { box-shadow: inset 3px 0 0 var(--water); }
.linkish { background: none; border: 0; padding: 0; color: var(--water); text-decoration: underline; font: inherit; cursor: pointer; }

/* Water log: forecast vs past */
.tag { font-size: .7rem; font-weight: 600; color: var(--muted); background: var(--line); border-radius: 999px; padding: 2px 8px; }
.fut-tag { color: var(--water); background: var(--water-soft); }
.fc-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; border-radius: 10px;
  border: 1.5px dashed var(--rain); background: repeating-linear-gradient(135deg, var(--water-soft) 0 5px, transparent 5px 10px);
}
.fc-item .icon { width: 24px; text-align: center; }
.fc-item .txt { flex: 1; min-width: 0; }
.fc-item .txt small { display: block; color: var(--muted); }
.fc-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--water); }
.chart .fut-shade { fill: var(--surface); opacity: .55; }
.chart .fut-l { text-anchor: middle; font-weight: 600; }

/* Sheets with a top bar (Cancel / title / Save) so actions are always reachable */
.sheet-form { padding: 0; overflow: hidden; display: none; }
.sheet-form[open] { display: flex; flex-direction: column; }
.sheet-form > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.sheet-bar {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 10px 8px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.sheet-bar h3 { font-size: 1rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.bar-btn { background: none; border: 0; color: var(--water); font-size: 1rem; padding: 8px 10px; min-height: 44px; cursor: pointer; justify-self: start; }
.bar-btn.primary { font-weight: 700; justify-self: end; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); min-height: 0; }
.name-input { font-size: 1.15rem !important; font-weight: 600; }
.seg-wide { display: flex; width: 100%; margin-top: 14px; }
.seg-wide button { flex: 1; padding: 9px 6px; font-size: .9rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 .field { margin-top: 12px; min-width: 0; }
.stepper { display: flex; align-items: stretch; margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.stepper button { flex: 0 0 40px; background: none; border: 0; font-size: 1.3rem; color: var(--water); cursor: pointer; }
.stepper input { border: 0 !important; border-radius: 0 !important; text-align: center; padding: 10px 0 !important; min-width: 0; margin: 0 !important; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.small-hint { font-size: .76rem; margin: 6px 0 0; }
.text-btn { display: block; width: 100%; background: none; border: 0; color: var(--water); padding: 14px 0 4px; font-size: .92rem; cursor: pointer; }
.text-btn:disabled { color: var(--muted); opacity: .6; }
.danger-text { color: var(--warn); }
.detail-head { margin-top: 2px; }

/* Display text in sheets shouldn't be selectable (long-press opens the sheet under the finger) */
.sheet-bar, .detail-head, .chart-head, .chart, .chart-key, .mini-log, .tile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Planted-on and water-per-week side by side: same label line, same 46px control height (iOS sizes date inputs its own way) */
.row2 .field { display: flex; flex-direction: column; gap: 4px; }
.row2 .field-label { line-height: 1.2; }
.row2 .field > input, .row2 .stepper { height: 46px; min-height: 46px; margin: 0 !important; box-sizing: border-box; }
.row2 input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; padding: 0 12px; line-height: 44px; text-align: left; color: var(--ink); }
.row2 input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.row2 input[type=date]::-webkit-calendar-picker-indicator { margin: 0; }
.stepper input { height: 100%; min-height: 0 !important; }

.text-btn[hidden] { display: none; }

/* Sign-in */
.signin { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.signin[hidden] { display: none; }
.signin-card { width: 100%; max-width: 380px; text-align: center; }
.signin-card img { border-radius: 16px; }
.signin-card h2 { font-size: 1.6rem; margin: 10px 0 6px; color: var(--brand); }
.signin-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.signin-card form[hidden] { display: none; }
.signin-card input { text-align: center; font-size: 1.05rem !important; }
#siCode { letter-spacing: .3em; font-size: 1.3rem !important; font-variant-numeric: tabular-nums; }
.si-msg { margin-top: 12px; min-height: 1.2em; color: var(--warn); }
.account-line { margin: 0 0 4px; }