body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; margin: 0; padding: 0; background: #fafafa; overflow-y: scroll; }
header { display: flex; justify-content:space-between; align-items:center; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eee; position: static; top: 0; }
h1 { margin: 0; font-size: 20px; }
#app { max-width: 1160px; margin: 0 auto; }
#reset { max-width: 1160px; margin: 0 auto; }
section { padding: 16px; }
.hidden { display: none; }
.card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
label { display: block; margin: 6px 0; font-size: 16px; }
input, select, textarea { box-sizing: border-box; width: 100%; height: 38px; padding: 6px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-size: 16px; }
button { margin-top: 12px; margin-right: 4px; padding: 10px 16px; border-radius: 10px; border: 1px solid #ccc; background: #111; color: #fff; cursor: pointer; font-size: 14px; }
a { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; margin-bottom: 6px; font-size: 16px; }
strong { font-size: 18px; }
.outline { background: #fff; color: #111; }
nav { display: flex; gap: 8px; margin-bottom: 12px; }
.grid { display: grid; gap: 8px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.two .span { grid-column: span 2; }
.grid.three { grid-template-columns: 2fr 1fr 1fr; }
.grid.four { grid-template-columns: 2fr 1fr 1fr 1fr; }
.field{ display: flex; flex-direction: column; gap: 6px }
.pw-wrap { display: flex; align-items: center; position: relative; }
.pw-wrap input { flex: 1; height: 38px; box-sizing: border-box; }
.pw-toggle { position: absolute; right: -4px; transform: translateY(-22%); border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; color: #444; opacity: .8; }
.pw-toggle:hover, .pw-toggle:focus { opacity: 1; outline: none; }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .icon-eye-off { display: none; }
.pw-toggle.is-visible .icon-eye     { display: none; }
.pw-toggle.is-visible .icon-eye-off { display: block; }
table { box-sizing: border-box; width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #eee; }
th, td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; font-size: 18px; }
.date-pair { display: flex; align-items: center; position: relative; }
.date-pair input { flex: 1; height: 38px; box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.calendar-btn { position: absolute; right: -4px; transform: translateY(-24%); border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; color: #444; opacity: .8; }
.calendar-btn:hover, .calendar-btn:focus { opacity: 1; outline: none; }
.calendar-btn svg { width: 20px; height: 20px; display: block; }
.msg { opacity: 0; transition: opacity 0.4s ease; color: #0a7; margin-top: 6px; font-size: 16px; }
.msg.show { opacity: 1; }
.msg.err { color: #c00; }
.err { color:#b00; }