/* System forms share one layout and palette. Chart/library content is not restyled. */
body[data-system-tone="light"] {
  --system-page:#fff; --system-surface:#fff; --system-control:#f4f5f7;
  --system-line:#ccd1d8; --system-ink:#202731; --system-muted:#596472;
  --system-soft:#e8ecf1; --system-button:#30343a; --system-button-ink:#fff;
  --system-danger:#d63843; color-scheme:light;
}
body[data-system-tone="dark"] {
  --system-page:#101114; --system-surface:#191c22; --system-control:#22262e;
  --system-line:#3b424d; --system-ink:#eef0f4; --system-muted:#abb3c0;
  --system-soft:#2b303a; --system-button:#e7e9ed; --system-button-ink:#16171a;
  --system-danger:#f05260; --login-mobile-page:#101114; --login-mobile-backdrop:radial-gradient(ellipse at 50% 35%,#292c32,#101114); color-scheme:dark;
}
body[data-system-tone]:not(.backend-theme-active) {
  --bg:var(--system-page); --bg2:var(--system-control); --card:var(--system-surface);
  --card-solid:var(--system-surface); --line:var(--system-line); --line2:var(--system-line);
  --text:var(--system-ink); --muted:var(--system-muted); --accent:var(--system-button);
}
body:is(.backend-theme-active,.bk-editing) .compact-form {
  --system-page:var(--backend-page); --system-surface:var(--backend-surface);
  --system-control:var(--backend-control); --system-line:var(--backend-line);
  --system-ink:var(--backend-ink); --system-muted:var(--backend-muted);
  --system-soft:var(--backend-soft); --system-button:var(--backend-button);
  --system-button-ink:var(--backend-button-ink);
}
body[data-system-tone] #view-input, body[data-system-tone] #side { background:var(--system-page); color:var(--system-ink); }
body[data-system-tone] #view-input::before { display:none; }
.compact-form .form-stack { border:1px solid var(--system-line); border-radius:12px; background:var(--system-surface); box-shadow:none; overflow:visible; }
.compact-form :is(.frow,.di-modal-field) { gap:8px; min-height:48px; padding:2px 10px; border-bottom:1px solid var(--system-line); }
.compact-form :is(.frow,.di-modal-field):last-child { border-bottom:0; }
.compact-form :is(.lab,.di-modal-label,.frow>label) { width:98px; font-size:14px; line-height:1.4; letter-spacing:0; color:var(--system-muted); white-space:nowrap; }
.compact-form .di-modal-field > .seg { margin-left:auto; }
.compact-form :is(input,textarea,.picker-trigger,#eb-birth) { color:var(--system-ink); font-size:16px; line-height:1.4; background:transparent; box-shadow:none; }
.compact-form .picker-trigger span { font-size:16px; letter-spacing:0; }
.compact-form input::placeholder,.compact-form textarea::placeholder { color:var(--system-muted); opacity:.75; }
.compact-form .seg { width:min(184px,100%); min-height:42px; border:1px solid var(--system-line); border-radius:8px; background:var(--system-control); padding:2px; gap:2px; box-shadow:none; }
.compact-form .seg button { font-size:16px; min-height:36px; border-radius:6px; color:var(--system-muted); background:transparent; border:0; box-shadow:none; }
.compact-form .seg button.on { color:var(--system-button-ink); background:var(--system-button); box-shadow:none; }
.compact-form .toggle { width:46px; min-width:46px; height:28px; border:0; background:var(--system-soft); box-shadow:none; }
.compact-form .toggle i { width:22px; height:22px; top:3px; left:3px; background:#fff; }
.compact-form .toggle.on { background:var(--system-button); }
.compact-form .toggle.on i { transform:translateX(18px); background:var(--system-button-ink); }
.compact-form :is(.frow-top,.di-modal-field:has(textarea)) { align-items:flex-start; padding-block:9px; }
.compact-form :is(.frow-top,.di-modal-field:has(textarea)) > :is(label,.lab) { padding-top:5px; }
.compact-form textarea { min-height:52px; border:0; padding:4px 0; border-radius:6px; }
.compact-form :is(input,textarea,.picker-trigger,#eb-birth):focus-visible { outline:2px solid var(--system-muted); outline-offset:1px; }
.compact-form #eb-birth { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.compact-form #eb-birth::after { content:""; width:7px; height:7px; flex:0 0 7px; border-right:1.5px solid var(--system-muted); border-top:1.5px solid var(--system-muted); transform:rotate(45deg); margin-right:3px; }
.system-form-title,.compact-form .di-modal-title { font-size:18px; line-height:1.4; font-weight:600; text-align:center; margin:0 0 12px; color:var(--system-ink); }
.compact-form :is(#btn-submit,.di-modal-btn.ok) { min-height:44px; border:1px solid var(--system-button); background:var(--system-button); color:var(--system-button-ink); box-shadow:none; border-radius:10px; font-size:16px; }
.compact-form .di-modal-btn.cancel { background:var(--system-control); color:var(--system-ink); border-color:var(--system-line); }
.compact-form .birth-edit-delete { color:#fff; }
.compact-form :is(button,input,textarea) { -webkit-tap-highlight-color:transparent; }
.compact-form button:active { filter:brightness(.94); }
/* Keep login geometry and routing; adopt the same system material and contrast. */
body[data-view="home"][data-system-tone] {
  --login-paper:var(--system-surface); --login-ink:var(--system-ink); --login-muted:var(--system-muted);
  --login-line:var(--system-line); --login-soft:var(--system-control); --login-focus:var(--system-muted);
}
body[data-view="home"][data-system-tone="dark"] { color-scheme:dark; }