.field select,.field input{height:36px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--ink);background:var(--control);box-shadow:0 0 0 1px var(--line);border:0}.date-time-input{gap:var(--space-2);grid-template-columns:minmax(0,1fr) auto;min-width:0;display:grid}.date-picker-control{height:36px;display:block;position:relative}.date-picker-label{align-items:center;gap:var(--space-1);white-space:nowrap;height:36px;display:inline-flex}.date-picker-control [data-native-date]{z-index:1;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;position:absolute;inset:0}.date-picker-control:focus-within .date-picker-label{outline:2px solid var(--focus-ring);outline-offset:2px}.time-workspace{padding:var(--space-4);gap:var(--space-4);border-bottom:1px solid var(--line);background:var(--input-surface);display:grid}.time-fields{align-items:start;gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.field{gap:var(--space-2);min-width:0;color:var(--muted);font-size:12px;font-weight:500;display:grid}.field input,.field select{width:100%}.field input{font-family:var(--code-font)}.field-hint{color:var(--muted);font-size:11px;font-weight:400;line-height:1.45}.time-actions{justify-content:flex-end;gap:var(--space-2);display:flex}.time-actions .secondary-button{align-items:center;gap:var(--space-1);display:inline-flex}.time-results{background:var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;display:grid}.result-field{min-width:0;padding:var(--space-3);gap:var(--space-2);background:var(--output-surface);color:var(--muted);font-size:12px;font-weight:500;display:grid}.result-control{align-items:center;gap:var(--space-1);display:flex}.result-control input{width:auto;min-width:0;height:36px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--ink);background:var(--recessed);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--code-font);border:0;flex:auto;font-size:12px}.result-control .text-button{white-space:nowrap;flex:none}.time-converter[data-mode=timestamp] .date-only,.time-converter[data-mode=date] .timestamp-only{display:none}@media (width<=840px){.time-fields{grid-template-columns:1fr 1fr}}@media (width<=680px){.field select,.field input,.date-picker-control,.date-picker-label{height:44px}.time-fields,.time-results{grid-template-columns:1fr}.time-actions{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.time-actions .primary-button,.time-actions .secondary-button{justify-content:center;height:44px}.result-control input,.result-control .text-button{height:44px}}