/* Fields, selects, segmented buttons, sliders, checkboxes */
.field{display:grid;gap:7px;margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field > label, .field > .lbl{font-weight:600;font-size:13px}
select,input[type=number],.addname input{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--leaf) 9%,var(--field));border:1px solid var(--line)}
.seg button{flex:1;border:0;background:transparent;padding:7px 4px;cursor:pointer;font-size:13px;border-radius:8px;font-weight:500;color:var(--muted)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--leaf);color:#fff;font-weight:700;box-shadow:0 2px 6px -2px color-mix(in srgb,var(--leaf) 70%,transparent)}
.range{display:flex;gap:10px;align-items:center}
.range input[type=range]{flex:1;accent-color:var(--leaf)}
.range output{min-width:62px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--leaf)}
.hint{font-size:12px;color:var(--muted);margin:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer;margin-bottom:10px}
.check input{margin-top:3px;accent-color:var(--violet);width:17px;height:17px;flex:none}
.check small{display:block;color:var(--muted);font-size:12px}